vuepress侧边栏配置_侧边栏(sidebar) - VuePress 中文文档
要启用侧边栏, 请使用 themeConfig.sidebar。基本的配置需要一个链接数组：
// .vuepress/config.js
module.exports = {
themeConfig: {
sidebar: [
'/',
'/page-a',
['/page-b', 'Explicit link text']
]
}
}
你可以省略 .md 扩展名，以 / 结尾的路径被推断为 */README.md 。该链接的文本是自动推断的(从页面的第一个标题或 YAML front matter 中的显式标题)。如果你希望明确指定链接文本，请使用 [link,text] 形式的数组。
嵌套标题链接(nested header links)
侧边栏自动显示当前激活页面中标题的链接，嵌套在页面本身的链接下。你可以使用 themeConfig.sidebarDepth 自定义此行为。默认深度是 1，它提取 h2 标题。将其设置为 0 将禁用标题链接，最大值为2，同时提取 h2 和 h3 标题。
页面也可以在使用 YAML front matter 时覆盖此值：
---
sidebarDepth: 2
---
显示所有页面的标题链接 0.11.0+
默认情况下，侧边栏只会显示由当前活动页面的标题(headers)组成的链接，你可以将 themeConfig.displayAllHeaders 设置为 true 来显示所有页面的标题链接：
module.exports = {
themeConfig: {
displayAllHeaders: true // 默认值：false
}
}
激活的标题链接
默认情况下，当用户滚动页面，查看不同部分时，嵌套的标题链接和 URL 中的哈希值会随之更新，此行为可以通过以下的主题配置来禁用：
module.exports = {
themeConfig: {
activeHeaderLinks: false, // 默认值：true
}
}
提示
值得一提的是，当你禁用此选项时，此功能相应的脚本将不会被加载，这是我们性能优化的一个小技巧。
侧边栏分组(sidebar groups)
你可以使用对象将侧边栏链接分成多个分组：
// .vuepress/config.js
module.exports = {
themeConfig: {
sidebar: [
{
title: 'Group 1',
collapsable: false,
children: [
'/'
]
},
{
title: 'Group 2',
children: [ /* ... */ ]
}
]
}
}
侧边栏分组默认情况下是可折叠的。你可以强制一个分组始终以 collapsable：false 打开。
多个侧边栏(multiple sidebars)
如果你希望为不同的内容部分显示不同的侧边栏，请先组织你的页面，放到每个要求部分的目录中:
.
├─ README.md
├─ contact.md
├─ about.md
├─ foo/
│ ├─ README.md
│ ├─ one.md
│ └─ two.md
└─ bar/
├─ README.md
├─ three.md
└─ four.md
然后，修改你的配置，将每个页面定义到不同的侧边栏中。
// .vuepress/config.js
module.exports = {
themeConfig: {
sidebar: {
'/foo/': [
'', /* /foo/ */
'one', /* /foo/one.html */
'two' /* /foo/two.html */
],
'/bar/': [
'', /* /bar/ */
'three', /* /bar/three.html */
'four' /* /bar/four.html */
],
// 回退(fallback)侧边栏配置
'/': [
'', /* / */
'contact', /* /contact.html */
'about' /* /about.html */
]
}
}
}
警告
请确保将回退(fallback)侧边栏，定义在配置的最后。
VuePress 会按从上到下的顺序，遍历侧边栏配置。如果回退侧边栏定义在第一位，VuePress 会无法正确的匹配 /foo/ 或 /bar/four.html，因为他们都以 / 为开始。
自动生成侧栏(auto sidebar for single pages)
如果你希望自动生成仅包含当前页面的标题链接的侧边栏，可以在该页面上使用 YAML front matter：
---
sidebar: auto
---
你也可以通过配置来在所有页面中启用它：
// .vuepress/config.js
module.exports = {
themeConfig: {
sidebar: 'auto'
}
}
在 多语言 模式下, 你也可以将其应用到某一特定的语言下：
// .vuepress/config.js
module.exports = {
themeConfig: {
'/': {
sidebar: 'auto'
}
}
}
禁用侧边栏(disabling the sidebar)
你可以使用 YAML front matter 禁用特定页面上的侧边栏：
---
sidebar: false
---