Skip to content

侧边栏与多级侧边栏

侧边栏的基础样式

侧边栏菜单最简单的形式是传入一个链接数组。第一级菜单项定义了侧边栏的“版块”。它应该包含text(版块标题)items(实际的导航链接)

js
export default {
  themeConfig: {
    sidebar: [
      {
        text: '一级标题A',
        items: [
          { text: '二级标题A', link: '/A文章位置' },
          { text: '二级标题B', link: '/B文章位置' },
          ...
        ]
      },
      {
        text: '一级标题B',
        items: [
          { text: '二级标题C', link: '/C文章位置' },
          { text: '二级标题D', link: '/D文章位置' },
          ...
        ]
      }
    ]
  }
}

每个链接都应该以link开头指定实际文件的路径/。如果在链接末尾添加斜杠,则会显示index.md相应的目录。

js
export default {
  themeConfig: {
    sidebar: [
      {
        text: '指南',
        items: [
          // 这里会展示 `/guide/index.md` 页面.
          { text: '介绍', link: '/指南/' }
        ]
      }
    ]
  }
}

多级侧边栏的实现方法

侧边栏项目可以进一步嵌套,最多可达 6 层(从根级开始)。请注意,超过 6 层的嵌套项目将被忽略,并且不会显示在侧边栏上。

js
export default {
  themeConfig: {
    sidebar: [
      {
        text: '一级标题',
        items: [
          {
            text: '二级标题',
            items: [
              {
                text: '三级标题',
                items: [
                  ...
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

在特定界面隐藏侧边栏

在对应界面的.md文件开头添加以下内容即可:

md
---
sidebar: false
---