侧边栏

/docs/.vuepress/config/themeConfig/sidebar.js

想要使 侧边栏（Sidebar）生效，需要配置 themeConfig.sidebar，基本的配置，需要一个包含了多个链接的数组:

module.exports = {
  themeConfig: {
    sidebar: ['/', '/page-a', ['/page-b', 'Explicit link text']],
  },
}

你可以省略 .md 拓展名，同时以 / 结尾的路径将会被视为 */README.md 或者 */index.md，这个链接的文字将会被自动获取到（无论你是声明为页面的第一个 header，还是明确地在 YAML front matter 中指定页面的标题）。如果你想要显示地指定链接的文字，使用一个格式为 [link, text] 的数组。

---

侧边栏分组

你可以通过使用对象来将侧边栏划分成多个组：

module.exports = {
  themeConfig: {
    sidebar: [
      {
        title: 'Group 1', // 必要的
        path: '/foo/', // 可选的, 标题的跳转链接，应为绝对路径且必须存在
        collapsable: false, // 可选的, 默认值是 true,
        sidebarDepth: 1, // 可选的, 默认值是 1
        children: ['/'],
      },
      {
        title: 'Group 2',
        children: [
          /* ... */
        ],
        initialOpenGroupIndex: -1, // 可选的, 默认值是 0
      },
    ],
  },
}

侧边栏的每个子组默认是可折叠的，你可以设置 collapsable: false 来让一个组永远都是展开状态

---

多个侧边栏

如果你想为不同的页面组来显示不同的侧边栏，首先，将你的页面文件组织成下述的目录结构：

.
├─ index.md
├─ contact.md
├─ about.md
├─ foo/
│ ├─ index.md
│ ├─ foo-1/
| |  ├─ foo-1-1.md
│ │  └─ foo-1-2.md
│ └─ foo-2.md
└─ bar/
  ├─ index.md
  ├─ bar-1.md
  └─ bar-2.md

接着，遵循以下的侧边栏配置：

// .vuepress/config/themeConfig/sidebar.js
module.exports = {
  '/foo/': [
    {
      title: 'foo1',
      path: '/foo/foo-1/',
      collapsable: true,
      sidebarDepth: 0,
      children: [
        ['/foo/foo-1/foo-1-1', 'foo-1-1'],
        ['/foo/foo-1/foo-1-2', 'foo-1-2'],
      ],
    },
    ['/foo/foo-2', 'foo 2'],
  ],
  '/bar/': [
    ['/bar/bar-1', 'bar 1'],
    ['/bar/bar-2', 'bar 2'],
  ],
}