【免费下载链接】blumeThe open-source docs framework for humans and agents.项目地址https://gitcode.com/gh_mirrors/blum/blume点击查看免费下载Blume是一个开源文档框架它的导航系统会从你的 Markdown 文件树自动生成侧边栏再允许你用 frontmatter 或文件夹里的meta.ts逐层精细控制。本教程带你走完这条路径理解自动推断规则 → 页面级微调 → 分组显示模式 → 用meta.ts控制标题、图标与排序 → 头部 Tabs、版本选择器最后到显式侧边栏的全量定制。️ 侧边栏如何从文件自动推断Blume 的侧边栏默认镜像你的内容目录无需任何清单文件文件系统侧边栏表现文件夹一个分组Group文件一个页面index.mdx分组的落地页分组标题点击直达它数字前缀如01-控制排序且会从 URL 中剥离页面标签取自 frontmatter 的title分组标签是文件夹名的人名化形式api-reference显示为 API Reference排序规则index页优先 → 数字前缀 → 字母序面包屑、上一/下一页链接、右侧On this page大纲全部由这棵导航树免费派生文件与路由的完整对应规则含日期命名、括号分组文件夹见官方文档navigation.mdx、index.mdx。 页面级微调frontmatter 的 sidebar 字段只改单页的展示在页面 frontmatter 中加sidebar块即可sidebar: label: Quickstart # 覆盖侧边栏中的标题 icon: rocket # 内置图标名 badge: New # 条目旁的小标签 order: 1 # 组内排序位 hidden: true # 从侧边栏与上下页导航中隐藏页面仍可访问hidden页面依然会被构建、可通过 URL 访问只是退出侧边栏、sitemap 和站点搜索。字段全集见 frontmatter.mdx。 三种分组显示模式flat / group / pagenavigation.sidebar.display控制所有侧边栏分组的渲染方式flat默认不可折叠的标题 下方平铺页面最经典group可折叠折叠组默认收起当前所在分组自动展开只展开你正在读的部分page钻取式子面板——每个分组是一行点开滑出子面板适合子项很多的深层章节group/page模式下未展开分组的行不随页面 HTML 下发首次展开才取指针靠近即预取大型站点上页面体积可省一大截。 meta.ts分组级精细控制完整指南在文件夹旁放一个meta.ts即可控制该分组的标题、图标、排序、初始展开状态、显示模式、组内子项顺序import { defineMeta } from blume; export default defineMeta({ title: Guides, icon: book-open, order: 2, collapsed: false, pages: [configuration, theming, deployment], });字段作用title/icon分组标签与图标order同级分组间的排序数字越小越靠前collapsedgroup模式下初始是否收起display该分组单独的显示模式覆盖全局设置directory在分组落地页内容下方列出子页card/accordion/nonepages按 slug 显式排列子项顺序仓库里就有真实用例可参考meta.ts、guides/meta.ts。两个进阶技巧计算式 metadefineMeta接受一个异步函数可在扫描期从 CMS 等外部源拉取排序多语言在fr/guides/下放meta.ts可独立控制法语分组所有语言通用时命名meta.$.ts即可一份文件覆盖全部 locale 排序优先级一分钟看懂侧边栏生成时排序按以下优先级从高到低解析blume.config.ts中显式配置的navigation.sidebar文件夹meta.ts的pages数组页面 frontmatter 的sidebar.order文件系统index页优先 → 数字前缀 → 字母序⚠️ 若两个同级项撞车同一个排序值Blume 会以BLUME_DUPLICATE_SIDEBAR_ORDER警告提醒你其余情况自动回退字母序。 头部 Tabs 与版本选择器大型站点可用头部Tabs分区如 Docs / CLI / APITabs 会同时限定侧边栏范围进入某 Tab 的路线下侧边栏只显示该分区的页面。Blume 官方站正是这样配置的见 blume.config.ts。需要按产品或版本切换整站内容时加一个selector即可——配置了版本管理后 Blume 还会自动生成版本选择器navigation: { selectors: [ { kind: version, label: Version, items: [ { label: v2 (latest), path: /v2, icon: rocket }, { label: v1, path: /v1 }, ], }, ], }️ 终极控制显式侧边栏想要完全脱离文件系统推断在blume.config.ts中直接列出navigation.sidebar条目——页面路由、分组、外部链接随意组合分组可嵌套、可指定显示模式、可挂directory。写不出对应页面的条目会被自动剔除并给出警告不会悄悄挂掉。✅ 常见警告速查警告含义与解法BLUME_NAV_INDEX_TITLE_MISMATCH文件夹meta.title与index页标题不一致统一二者即可BLUME_SIDEBAR_DISPLAY_IGNOREDsidebar.display用错了位置非 index 页、根 index 页、或已配置显式侧边栏BLUME_META_OUTSIDE_INCLUDEmeta.ts在includeglob 之外没被读取扩大 include 范围BLUME_META_UNKNOWN_PAGEpages数组写了不存在的 slugBlume 会提示最可能想写的名字 相关文件资料导航完整参考navigation.mdx文件夹 meta 完整参考meta.mdx页面 frontmatter 全字段frontmatter.mdx示例分组配置guides/meta.ts官方站 Tabs 配置实例blume.config.ts从 0 配置的自动推断到meta.ts的分组级控制再到显式侧边栏的全量定制——Blume 的导航体系让你按需取用侧边栏、面包屑、分页、大纲始终自动保持一致。赞分享【免费下载链接】blumeThe open-source docs framework for humans and agents.项目地址https://gitcode.com/gh_mirrors/blum/blume点击查看免费下载相关推荐Xplorer侧边栏配置教程自定义你的文件导航面板Xplorer侧边栏配置教程自定义你的文件导航面板 想要让文件管理更加高效Xplorer的侧边栏就是你的得力助手作为一款现代化的文件管理器Xplorer桌面应用AI 应用交互助手CoreUI React侧边栏导航实战自定义菜单与权限控制CoreUI React侧边栏导航实战自定义菜单与权限控制 CoreUI React管理模板提供了强大的侧边栏导航系统通过简单的配置就能实现复杂的菜单结构和前端Lightdash 设置页侧边栏导航架构从 CASL 权限门控到数据驱动的设置搜索Lightdash 设置页侧边栏导航架构从 CASL 权限门控到数据驱动的设置搜索 导读 本文深入剖析 Lightdash 前端设置页Settings侧边后端前端数据分析数据可视化人工智能AI Agent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/11 0:48:07 · 阅读 1.2k Blume导航与侧边栏配置教程：从文件自动推断到meta.ts精细控制
【免费下载链接】blumeThe open-source docs framework for humans and agents.项目地址https://gitcode.com/gh_mirrors/blum/blume点击查看免费下载Blume是一个开源文档框架它的导航系统会从你的 Markdown 文件树自动生成侧边栏再允许你用 frontmatter 或文件夹里的meta.ts逐层精细控制。本教程带你走完这条路径理解自动推断规则 → 页面级微调 → 分组显示模式 → 用meta.ts控制标题、图标与排序 → 头部 Tabs、版本选择器最后到显式侧边栏的全量定制。️ 侧边栏如何从文件自动推断Blume 的侧边栏默认镜像你的内容目录无需任何清单文件文件系统侧边栏表现文件夹一个分组Group文件一个页面index.mdx分组的落地页分组标题点击直达它数字前缀如01-控制排序且会从 URL 中剥离页面标签取自 frontmatter 的title分组标签是文件夹名的人名化形式api-reference显示为 API Reference排序规则index页优先 → 数字前缀 → 字母序面包屑、上一/下一页链接、右侧On this page大纲全部由这棵导航树免费派生文件与路由的完整对应规则含日期命名、括号分组文件夹见官方文档navigation.mdx、index.mdx。 页面级微调frontmatter 的 sidebar 字段只改单页的展示在页面 frontmatter 中加sidebar块即可sidebar: label: Quickstart # 覆盖侧边栏中的标题 icon: rocket # 内置图标名 badge: New # 条目旁的小标签 order: 1 # 组内排序位 hidden: true # 从侧边栏与上下页导航中隐藏页面仍可访问hidden页面依然会被构建、可通过 URL 访问只是退出侧边栏、sitemap 和站点搜索。字段全集见 frontmatter.mdx。 三种分组显示模式flat / group / pagenavigation.sidebar.display控制所有侧边栏分组的渲染方式flat默认不可折叠的标题 下方平铺页面最经典group可折叠折叠组默认收起当前所在分组自动展开只展开你正在读的部分page钻取式子面板——每个分组是一行点开滑出子面板适合子项很多的深层章节group/page模式下未展开分组的行不随页面 HTML 下发首次展开才取指针靠近即预取大型站点上页面体积可省一大截。 meta.ts分组级精细控制完整指南在文件夹旁放一个meta.ts即可控制该分组的标题、图标、排序、初始展开状态、显示模式、组内子项顺序import { defineMeta } from blume; export default defineMeta({ title: Guides, icon: book-open, order: 2, collapsed: false, pages: [configuration, theming, deployment], });字段作用title/icon分组标签与图标order同级分组间的排序数字越小越靠前collapsedgroup模式下初始是否收起display该分组单独的显示模式覆盖全局设置directory在分组落地页内容下方列出子页card/accordion/nonepages按 slug 显式排列子项顺序仓库里就有真实用例可参考meta.ts、guides/meta.ts。两个进阶技巧计算式 metadefineMeta接受一个异步函数可在扫描期从 CMS 等外部源拉取排序多语言在fr/guides/下放meta.ts可独立控制法语分组所有语言通用时命名meta.$.ts即可一份文件覆盖全部 locale 排序优先级一分钟看懂侧边栏生成时排序按以下优先级从高到低解析blume.config.ts中显式配置的navigation.sidebar文件夹meta.ts的pages数组页面 frontmatter 的sidebar.order文件系统index页优先 → 数字前缀 → 字母序⚠️ 若两个同级项撞车同一个排序值Blume 会以BLUME_DUPLICATE_SIDEBAR_ORDER警告提醒你其余情况自动回退字母序。 头部 Tabs 与版本选择器大型站点可用头部Tabs分区如 Docs / CLI / APITabs 会同时限定侧边栏范围进入某 Tab 的路线下侧边栏只显示该分区的页面。Blume 官方站正是这样配置的见 blume.config.ts。需要按产品或版本切换整站内容时加一个selector即可——配置了版本管理后 Blume 还会自动生成版本选择器navigation: { selectors: [ { kind: version, label: Version, items: [ { label: v2 (latest), path: /v2, icon: rocket }, { label: v1, path: /v1 }, ], }, ], }️ 终极控制显式侧边栏想要完全脱离文件系统推断在blume.config.ts中直接列出navigation.sidebar条目——页面路由、分组、外部链接随意组合分组可嵌套、可指定显示模式、可挂directory。写不出对应页面的条目会被自动剔除并给出警告不会悄悄挂掉。✅ 常见警告速查警告含义与解法BLUME_NAV_INDEX_TITLE_MISMATCH文件夹meta.title与index页标题不一致统一二者即可BLUME_SIDEBAR_DISPLAY_IGNOREDsidebar.display用错了位置非 index 页、根 index 页、或已配置显式侧边栏BLUME_META_OUTSIDE_INCLUDEmeta.ts在includeglob 之外没被读取扩大 include 范围BLUME_META_UNKNOWN_PAGEpages数组写了不存在的 slugBlume 会提示最可能想写的名字 相关文件资料导航完整参考navigation.mdx文件夹 meta 完整参考meta.mdx页面 frontmatter 全字段frontmatter.mdx示例分组配置guides/meta.ts官方站 Tabs 配置实例blume.config.ts从 0 配置的自动推断到meta.ts的分组级控制再到显式侧边栏的全量定制——Blume 的导航体系让你按需取用侧边栏、面包屑、分页、大纲始终自动保持一致。赞分享【免费下载链接】blumeThe open-source docs framework for humans and agents.项目地址https://gitcode.com/gh_mirrors/blum/blume点击查看免费下载相关推荐Xplorer侧边栏配置教程自定义你的文件导航面板Xplorer侧边栏配置教程自定义你的文件导航面板 想要让文件管理更加高效Xplorer的侧边栏就是你的得力助手作为一款现代化的文件管理器Xplorer桌面应用AI 应用交互助手CoreUI React侧边栏导航实战自定义菜单与权限控制CoreUI React侧边栏导航实战自定义菜单与权限控制 CoreUI React管理模板提供了强大的侧边栏导航系统通过简单的配置就能实现复杂的菜单结构和前端Lightdash 设置页侧边栏导航架构从 CASL 权限门控到数据驱动的设置搜索Lightdash 设置页侧边栏导航架构从 CASL 权限门控到数据驱动的设置搜索 导读 本文深入剖析 Lightdash 前端设置页Settings侧边后端前端数据分析数据可视化人工智能AI Agent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考