外观
VitePress Sidebar 可通过两个函数自动生成侧边栏:withSidebar 和 generateSidebar。通常建议使用 withSidebar,它支持热重载,也是标准做法
一:使用 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, # 调试模式,打印生成的侧边栏结构到控制台
})1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
二:使用 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));1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20