Skip to content

VitePress Sidebar 可通过两个函数自动生成侧边栏:withSidebar 和 generateSidebar。通常建议使用 withSidebar,它支持热重载,也是标准做法

详细配置可查看:https://vitepress-sidebar.cdget.com/

一:使用 generateSidebar 函数

bash
import { defineConfig } from 'vitepress'
import { generateSidebar } from 'vitepress-sidebar';

sidebar: generateSidebar({
     ============ [ 路径解析 ] ============
     documentRootPath: '/',  # 文档根目录路径
     scanStartPath: null,  # 扫描起始目录,为空则扫描整个 documentRootPath
     resolvePath: null,  # 生成链接的前缀路径,用于多侧边栏匹配
     basePath: null,  # 基础路径,影响最终生成的 url
     followSymlinks: false,  # 是否跟随符号链接(软链接)扫描文件
    
     ============ [ 分组折叠 ] ============
     collapsed: false,  # 侧边栏分组是否默认折叠
     collapseDepth: 2,  # 自动折叠的深度层级
     collapseFromLevel: 1,  # 从第几级开始折叠
     rootGroupText: 'Contents',  # 根分组的显示文字
     rootGroupLink: 'https:github.com/jooy2',  # 根分组的链接地址
     rootGroupCollapsed: false,  # 根分组是否默认折叠
    
     ============ [ 获取菜单标题 ] ============
     useTitleFromFileHeading: false,  # 从文件中的 '#' 标题提取侧边栏文字
     useTitleFromFrontmatter: false,  # 从 frontmatter 的 'title' 字段提取
     useFolderLinkFromIndexFile: false,  # 文件夹链接指向其 index.md
     useFolderTitleFromIndexFile: false,  # 文件夹标题从其 index.md 的标题获取
     frontmatterTitleFieldName: 'title',  # frontmatter 中用于标题的字段名
    
     ============ [ 获取菜单链接 ] ============
     useFolderLinkFromSameNameSubFile: false,  # 文件夹链接指向与其同名的子文件
     useFolderLinkFromIndexFile: false,  # 文件夹链接指向  index.md
     folderLinkNotIncludesFileName: false,  # 文件夹链接不包含文件名(只到文件夹路径)
    
     ============ [ 包含 / 排除 ] ============
     excludeByGlobPattern: ['README.md', 'folder/'],  # 按 Glob 模式排除文件/文件夹,如  ['README.md', 'folder/']
     excludeFilesByFrontmatterFieldName: 'exclude',  # 根据 frontmatter 某字段排除文件
     excludeByFolderDepth: undefined,  # 排除超过指定深度的文件夹
     includeDotFiles: false,  # 是否包含以 '.' 开头的隐藏文件
     includeEmptyFolder: false,  # 是否包含空文件夹
     includeRootIndexFile: false,  # 是否包含根目录的 index.md
     includeFolderIndexFile: false,  # 是否在侧边栏显示文件夹的 index.md
    
     ============ [ 标题样式 ] ============
     hyphenToSpace: false,  # 将文件名中的 '-' 替换为空格
     underscoreToSpace: false,  # 将文件名中的 '_' 替换为空格
     capitalizeFirst: false,  # 首字母大写
     capitalizeEachWords: false,  # 每个单词首字母大写
     keepMarkdownSyntaxFromTitle: false,  # 保留标题中的 Markdown 语法
     removePrefixAfterOrdering: false,  # 排序前缀(如  01. )在显示时移除
     prefixSeparator: '.',  # 排序前缀的分隔符 
    
     ============ [ 排序 ] ============
     manualSortFileNameByPriority: ['first.md', 'second', 'third.md'],  # 手动指定文件排序优先级,如  ['first.md', 'second']
     sortFolderTo: null,  # 文件夹排序位置:'top' 置顶 / 'bottom' 置底
     sortMenusByName: false,  # 按文件名排序
     sortMenusByFileDatePrefix: false,  # 按文件名中的日期前缀排序
     sortMenusByFrontmatterOrder: false,  # 按 frontmatter 的 'order' 字段排序
     frontmatterOrderDefaultValue: 0,  # 'order' 字段的默认值
     sortMenusByFileCreateDate: false,  # 按文件创建时间排序
     sortMenusByFileModifyDate: false,  # 按文件修改时间排序
     sortMenusByFrontmatterDate: false,  # 按 frontmatter 的 'date' 字段排序
     sortMenusOrderByDescending: false,  # 降序排列(默认升序)
     sortMenusOrderNumericallyFromTitle: false,  # 从标题中提取数字排序
     sortMenusOrderNumericallyFromLink: false,  # 从链接中提取数字排序
    
     ============ [ 调试 ] ============
     debugPrint: false,  # 调试模式,打印生成的侧边栏结构到控制台
  })

二:使用 withSidebar 函数

bash
// `.vitepress/config.js`
import { defineConfig } from 'vitepress'
import { withSidebar } from 'vitepress-sidebar';

const vitePressOptions = {
  // VitePress's options here...
  title: 'VitePress Sidebar',
  themeConfig: {
    // ...
  }
};

const vitePressSidebarOptions = {
  // VitePress Sidebar's options here...
  documentRootPath: '/',
  collapsed: false,
  capitalizeFirst: true
};

export default defineConfig(withSidebar(vitePressOptions, vitePressSidebarOptions));