【5】VitePress搭建个人博客-侧边栏设置

侧边栏

侧边栏是文档的主要导航块。 可以在 themeConfig.sidebar 中配置侧边栏菜单

基本使用

侧边栏菜单的最简单形式是传入一个链接数组。 第一级项目定义了侧边栏部分。 它应该包含text，即该部分的标题，以及 items ，即实际的导航链接。

export default {
  themeConfig: {
    sidebar: [
      {
          text: "欢迎阅读",
          items: [
            {
              text: "阅读须知",
              link: "/posts/阅读须知",
            },          
          ],
        },
        {
          text: "vitepress",
          collapsible:true,
          collapsed:true,
          items: [
            {
              text: "介绍",
              link: "/posts/vitepress/介绍",
            },
            {
              text:"快速上手",
              link:"/posts/vitepress/快速上手"
            },
            {
              text:"主页",
              link:"/posts/vitepress/主页"
            },
            {
              text:"导航栏",
              link:"/posts/vitepress/导航栏"
            },
            {
              text:"侧边栏",
              link:"/posts/vitepress/侧边栏"
            }
          ],
        }
    ]
  }
}

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

多个侧边栏

您可能会根据页面路径显示不同的侧边栏。 例如，如本网站所示，您可能希望在文档中创建单独的内容部分

export default {
  themeConfig: {
    sidebar: {
        //第一个页面
      '/guide/': [
        {
          text: 'Guide',
          items: [
            { text: 'Index', link: '/guide/' }, 
            { text: 'One', link: '/guide/one' }, 
            { text: 'Two', link: '/guide/two' } 
          ]
        }
      ],
        //第二个页面
      '/config/': [
        {
          text: 'Config',
          items: [    
            { text: 'Index', link: '/config/' }, 
            { text: 'Three', link: '/config/three' }, 
            { text: 'Four', link: '/config/four' } 
          ]
        }
      ]
    }
  }
}

可折叠侧边栏

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'A',
        collapsible: true,
        collapsed: true,
        items: [...]
      },
    ]
  }
}

1. 通过向侧边栏组添加 collapsible 选项，它会显示一个切换按钮来隐藏/显示子菜单。
2. 默认情况下，所有侧边栏都是展开的。 如果你希望它们在初始页面加载时关闭，请将 collapsed 选项设置为 true。