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

---