Themes

主题

功能靠插件，外观靠主题。从颜色、字体到页眉和文章卡片的形状，网站的外观都汇集在一个目录中，并在管理后台切换。文章和设置保持不变，只替换外观。

主题示例

我们公开了用同一批示例文章、只更换主题构建的演示。点击图片即可打开演示。

纸与木纹
本白纸色的底色配墨色文字，点缀木纹。适合沉静的阅读内容。
打开演示
简约
只有白色底色、灰色线条和黑体字的通用主题，适合任何行业。装饰极简，品牌色一色为主角。
打开演示
HOKUSAI（蓝与和纸）
灵感来自葛饰北斋浮世绘的主题。和纸色底色配墨色文字，普鲁士蓝点缀与朱红落款，青海波纹样。标题使用明朝体，首页铺满《神奈川冲浪里》。
打开演示

主题的内容

主题结构

frontend/themes/my-theme/
├── theme.json      # id、名称、版本、要替换的部件
├── tokens.css      # 颜色、间距、字体等设计令牌
├── overrides.css   # 可选：组件的 CSS 覆盖
├── components/     # 可选：替换部件
└── public/         # 可选：Logo、OG 图片、favicon 等

可替换的部件

只有写在 theme.json 中的部件会被主题替换，其余使用标准部件。

Header页眉
Footer页脚
HomeHero首页主视觉
PostCard文章卡片
ArticleSidebar / Sidebar文章页、列表页的侧边栏
PrDisclosurePR 标注的外观（是否显示由网站设置决定）

与网站设置配合使用

品牌色
主题的 tokens.css 决定默认颜色。在管理后台的网站设置中指定品牌色后，按钮和点缀色会变为该颜色。同一个主题，也能在每个网站上使用不同的颜色。
代替特色图片的图片
在主题中附带图片后，未设置特色图片的文章会各自固定分配到一张图片，列表页不会显得残缺。
切换与生效
在管理后台的“系统 > 主题”中切换当前主题。对外网站会从下一次构建起生效。

开发与分发

最快的方式是复制现有主题的 tokens.css 并修改其中的值。也可以不写代码，只在设计工具中修改 CSS 来制作主题。

npm run theme:kit
导出真实页面，交给设计工具
npm run theme:import
由修改后的 CSS 生成主题
./scripts/package.sh --theme my-theme
生成分发用 zip

查看演示快速上手（主题）