如何自定义 Docbase 文档主题flatdoc-theme 样式体系与 CSS 覆盖完整指南【免费下载链接】DocbaseTurn .md docs into beautiful sites项目地址: https://gitcode.com/gh_mirrors/do/DocbaseDocbase 是一个将 Markdown 文档一键转换为漂亮文档站点的开源工具支持版本管理和优雅渲染的导航菜单。本文带你零基础掌握Docbase 文档主题自定义的完整方法从 flatdoc-theme 样式体系讲到 CSS 覆盖技巧让你几分钟内就能把自己的文档站改成品牌配色。 Docbase 主题样式体系三层 CSS 结构Docbase 的页面样式来自三个层次理解这个叠加关系是自定义主题的关键层次来源作用第 1 层Bootstrap提供栅格、按钮、下拉菜单等基础组件第 2 层flatdoc 主题theme-white提供文档正文、侧边目录的布局骨架第 3 层Docbase 自有样式顶栏、版本号切换、版本管理等专属功能样式这些引用都写在站点入口文件中打开 index.html 可以看到完整的样式加载顺序先引入 Bootstrap再引入 flatdoc 的theme-white/style.css最后才是 Docbase 自己的 styles/main.css 和 styles/docs.css。 记住一条黄金法则后加载的 CSS 会覆盖先加载的。所以只要你把自定义样式放在最后就能轻松盖住默认主题。 动手前认识 4 个核心文件自定义主题只需要碰这几个文件其他都可以完全不管index.html—— 站点入口决定哪些 CSS/JS 被加载、以什么顺序加载html/flatdoc.html—— 文档页布局模板包含左侧菜单栏.menubar、正文区.content和底部翻页区.footerhtml/navbar.html—— 顶部导航栏Logo、版本切换器、搜索框都在这里styles/main.css—— Docbase 主样式主题色默认#50BAEF蓝色就藏在这里 快速上手4 步改出你的品牌主题第 1 步找到主题色的总开关打开 styles/main.css你会看到顶部导航栏的默认蓝色.navbar-fixed-top { background: #50BAEF; }按钮、菜单链接、正文链接等十几处地方也都用了这个颜色见 styles/main.css。第 2 步用 CSS 覆盖替换颜色而不是逐个修改最稳妥的做法是新建一个自定义样式文件然后在 index.html 中把它加在最后一条 CSS 之后例如/* 自定义主题换成紫色品牌色 */ .navbar-fixed-top { background: #6C5CE7; } .button, .menu a, a { color: #6C5CE7; }这样做的好处升级 Docbase 时你的修改不会丢改错一行也随时能删掉文件恢复原样。第 3 步换掉顶部 Logo导航栏模板 html/navbar.html 中的 Logo 图片地址由配置项logoSrc控制。在 docbase-config.js 里把logoSrc指向你自己的图片即可样式细节Logo 高度 34px 等定义在 styles/docs.css。第 4 步调整布局开关可选scripts/docbase.js 支持两个页面级布局开关可以在单个 Markdown 文档的 front matter 中单独控制threeColumns—— 是否启用三栏布局菜单 正文 右侧同目录页列表navigationSidebar—— 是否显示右侧Other pages in侧边栏想全局隐藏右侧栏只需在 front matter 中设置navigationSidebar: false。 CSS 覆盖高频场景速查想改什么去哪个文件关键选择器顶栏背景色自定义 CSS.navbar-fixed-top菜单/链接主题色自定义 CSS.menu a、a正文字体styles/docs.cssbody默认 Source Sans Pro标题字号styles/docs.css.content h1~.content h6左侧菜单宽度styles/docs.css.menubar宽屏下默认 300px正文背景与书卷效果styles/docs.css.content-root内阴影分层效果正文图片最大宽度styles/docs.cssp img, a img默认 700px⚙️ flatdoc-theme 是如何驱动样式的除了静态 CSSscripts/flatdoc-theme.js 负责页面的动态效果它会让你的主题活起来滚动高亮阅读正文时左侧目录中对应的 h2/h3 标题会自动加上active类见 scripts/flatdoc-theme.js。所以你自定义选中态时目标就是给.menu a.active:after换颜色。侧边栏吸附向下滚动超过一定距离后左侧菜单会切换为fixed类固定悬浮见 scripts/flatdoc-theme.js对应的留白样式在 styles/main.css 的.menubar.fixed中。目录层级样式菜单中一级、二级条目分别使用level-1、level-2类可以在 styles/docs.css 中分别调粗细。✅ 自定义主题检查清单自定义 CSS 文件已加入 index.html 且位于所有默认样式之后顶栏、按钮、链接三处主题色保持一致Logo 尺寸适中导航栏高度约 34px 显示区宽屏1350px与窄屏下都检查过菜单宽度滚动长文档时目录高亮与菜单吸附效果正常总结Docbase 的主题自定义思路非常清晰Bootstrap 打底 → flatdoc 主题定布局 → Docbase 样式管细节 → 你的自定义 CSS 说了算。只要掌握 styles/main.css、styles/docs.css 和 html/flatdoc.html 这三个主战场配合最后加载的覆盖规则你就能快速打造风格独特的文档站点。【免费下载链接】DocbaseTurn .md docs into beautiful sites项目地址: https://gitcode.com/gh_mirrors/do/Docbase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何自定义 Docbase 文档主题？flatdoc-theme 样式体系与 CSS 覆盖完整指南
如何自定义 Docbase 文档主题flatdoc-theme 样式体系与 CSS 覆盖完整指南【免费下载链接】DocbaseTurn .md docs into beautiful sites项目地址: https://gitcode.com/gh_mirrors/do/DocbaseDocbase 是一个将 Markdown 文档一键转换为漂亮文档站点的开源工具支持版本管理和优雅渲染的导航菜单。本文带你零基础掌握Docbase 文档主题自定义的完整方法从 flatdoc-theme 样式体系讲到 CSS 覆盖技巧让你几分钟内就能把自己的文档站改成品牌配色。 Docbase 主题样式体系三层 CSS 结构Docbase 的页面样式来自三个层次理解这个叠加关系是自定义主题的关键层次来源作用第 1 层Bootstrap提供栅格、按钮、下拉菜单等基础组件第 2 层flatdoc 主题theme-white提供文档正文、侧边目录的布局骨架第 3 层Docbase 自有样式顶栏、版本号切换、版本管理等专属功能样式这些引用都写在站点入口文件中打开 index.html 可以看到完整的样式加载顺序先引入 Bootstrap再引入 flatdoc 的theme-white/style.css最后才是 Docbase 自己的 styles/main.css 和 styles/docs.css。 记住一条黄金法则后加载的 CSS 会覆盖先加载的。所以只要你把自定义样式放在最后就能轻松盖住默认主题。 动手前认识 4 个核心文件自定义主题只需要碰这几个文件其他都可以完全不管index.html—— 站点入口决定哪些 CSS/JS 被加载、以什么顺序加载html/flatdoc.html—— 文档页布局模板包含左侧菜单栏.menubar、正文区.content和底部翻页区.footerhtml/navbar.html—— 顶部导航栏Logo、版本切换器、搜索框都在这里styles/main.css—— Docbase 主样式主题色默认#50BAEF蓝色就藏在这里 快速上手4 步改出你的品牌主题第 1 步找到主题色的总开关打开 styles/main.css你会看到顶部导航栏的默认蓝色.navbar-fixed-top { background: #50BAEF; }按钮、菜单链接、正文链接等十几处地方也都用了这个颜色见 styles/main.css。第 2 步用 CSS 覆盖替换颜色而不是逐个修改最稳妥的做法是新建一个自定义样式文件然后在 index.html 中把它加在最后一条 CSS 之后例如/* 自定义主题换成紫色品牌色 */ .navbar-fixed-top { background: #6C5CE7; } .button, .menu a, a { color: #6C5CE7; }这样做的好处升级 Docbase 时你的修改不会丢改错一行也随时能删掉文件恢复原样。第 3 步换掉顶部 Logo导航栏模板 html/navbar.html 中的 Logo 图片地址由配置项logoSrc控制。在 docbase-config.js 里把logoSrc指向你自己的图片即可样式细节Logo 高度 34px 等定义在 styles/docs.css。第 4 步调整布局开关可选scripts/docbase.js 支持两个页面级布局开关可以在单个 Markdown 文档的 front matter 中单独控制threeColumns—— 是否启用三栏布局菜单 正文 右侧同目录页列表navigationSidebar—— 是否显示右侧Other pages in侧边栏想全局隐藏右侧栏只需在 front matter 中设置navigationSidebar: false。 CSS 覆盖高频场景速查想改什么去哪个文件关键选择器顶栏背景色自定义 CSS.navbar-fixed-top菜单/链接主题色自定义 CSS.menu a、a正文字体styles/docs.cssbody默认 Source Sans Pro标题字号styles/docs.css.content h1~.content h6左侧菜单宽度styles/docs.css.menubar宽屏下默认 300px正文背景与书卷效果styles/docs.css.content-root内阴影分层效果正文图片最大宽度styles/docs.cssp img, a img默认 700px⚙️ flatdoc-theme 是如何驱动样式的除了静态 CSSscripts/flatdoc-theme.js 负责页面的动态效果它会让你的主题活起来滚动高亮阅读正文时左侧目录中对应的 h2/h3 标题会自动加上active类见 scripts/flatdoc-theme.js。所以你自定义选中态时目标就是给.menu a.active:after换颜色。侧边栏吸附向下滚动超过一定距离后左侧菜单会切换为fixed类固定悬浮见 scripts/flatdoc-theme.js对应的留白样式在 styles/main.css 的.menubar.fixed中。目录层级样式菜单中一级、二级条目分别使用level-1、level-2类可以在 styles/docs.css 中分别调粗细。✅ 自定义主题检查清单自定义 CSS 文件已加入 index.html 且位于所有默认样式之后顶栏、按钮、链接三处主题色保持一致Logo 尺寸适中导航栏高度约 34px 显示区宽屏1350px与窄屏下都检查过菜单宽度滚动长文档时目录高亮与菜单吸附效果正常总结Docbase 的主题自定义思路非常清晰Bootstrap 打底 → flatdoc 主题定布局 → Docbase 样式管细节 → 你的自定义 CSS 说了算。只要掌握 styles/main.css、styles/docs.css 和 html/flatdoc.html 这三个主战场配合最后加载的覆盖规则你就能快速打造风格独特的文档站点。【免费下载链接】DocbaseTurn .md docs into beautiful sites项目地址: https://gitcode.com/gh_mirrors/do/Docbase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考