Question

要启用侧边栏, 请使用 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
---