0.8.7 新增内容

主题仍然是为站点重新着色的最简单方式。如果您需要不同的布局结构(而不仅仅是颜色),请查看新的 模板 页面 —— 模板叠在主题之上,并附带它们自己的 EJS partials 和 CSS/JS bundle。

docmd 提供了一套专业设计的、亮/暗响应式主题。您只需在 docmd.config.json 中更改一个键,即可切换整个站点的外观。

如何切换主题

docmd.config.json
{
  "theme": {
    "name": "sky",
    "appearance": "system"
  }
}

内置主题画廊

主题 适用场景 风格
default 低调文档 简洁、轻量、中性
sky 产品文档 现代、高端、标准风格
ruby 品牌识别 精致、衬线标题、鲜艳
retro 开发工具 80年代终端、等宽、霓虹点缀

1. default

本文档站点所使用的主题。如果您计划添加大量自定义 CSS,并且不希望任何内置设计层干扰,请使用此主题。

2. sky

现代风格的文档外观,具有清晰的字体、细腻的过渡以及高对比度的亮/暗模式。

3. ruby

由衬线驱动的主题,配以深邃的宝石色调色板。适合需要权威感的文档。

4. retro

受复古计算启发的主题,深色模式下为黑底上的磷光绿文字,具有扫描线效果,并使用等宽字体(默认为 Fira Code)。

保留名称 —— 不要用作模板名

上述四个值(defaultskyrubyretro)是仅有的保留 CSS 主题名。theme.name 中的任何其他值都会自动提升为模板名(请参阅 模板)。如果您想在模板上使用类似 CSS 主题的名称,请显式设置 theme.template

主题架构

  1. CSS 分层:主题是可叠加的。选择 sky 会加载基础的 default 样式,并在其上叠加 sky 调色板。
  2. 暗色模式:每个主题都包含内置的暗色模式实现。
  3. 实时切换:当用户通过 UI 切换主题时,SPA 引擎会更新相关的 CSS 变量而无需重新加载页面。

CSS 变量名称在不同主题之间略有不同(例如,--sky-primary 仅在 sky 下存在)。在请求自定义 CSS 帮助时提及您的主题名称可保持建议的准确性。