05.【侧边导航】侧边栏Sidebar的设置

这节我们讲一下VitePress的侧边栏基本配置，内容会包括侧边栏基本配置、把侧边栏配置形成单独页面、根据链接动态显示侧边栏和折叠设置。先来看侧边栏的基本配置。

侧边栏基本配置

侧边栏SideBar是文档的主导航模块，可以在config.mts 文件中设置。打开文件，可以看到这样的代码。

sidebar: [
      {
        text: 'Examples',
        items: [
          { text: 'Markdown Examples', link: '/markdown-examples' },
          { text: 'Runtime API Examples', link: '/api-examples' }
        ]
      }
    ],

这就是VitePress给我们生成的默认侧边栏。第一个text是侧边栏显示的文字，比如我们要设置侧边栏显示的内容是VitePress，修改这部分即可。下面的items是一个数组，里边就是导航栏的设置了。里边的text为导航文字，link为链接地址。

形成单独页面

我的建议是一定要把侧边栏独立出一个文件，因为你每多一篇文章，侧边栏都会多一项配置（你可以用Python写个自动生成，担任这需要你会点编程知识）。

有了上节课的经验，这个并不难。首先我们需要在 /.vitepress 文件夹下，新建一个名为 sidebar.mts的文件，编写如下代码。

export default [
      {
        text: 'Examples',
        items: [
          { text: 'Markdown Examples', link: '/markdown-examples' },
          { text: 'Runtime API Examples', link: '/api-examples' }
        ]
      }
    ]

再到 config.mts 页面中引入sidebar.mts 并使用。

import sidebar from './sidebar.mjs'
//....

themeConfig: {
  sidebar:sidebar,
}

这样sidebar配置项就被独立出来了。

动态显示侧边栏

这时候有个需求，我希望动态的显示侧边栏，而不是一直固定不变。比如我们点到VitePress的教程里，就显示VitePress的所有章节导航。而点击 “生活分享”时，就先不显示侧边栏。这时候需要在Sidebar配置的最前面，用字符串的形式，加上 链接路径，路径匹配成功，显示对应的侧边栏。

这里我给出我现在网站的侧边栏设置。

export default {
    '/系统教程/VitePress/':[{
      text:'VitePress',
      items:[
        {text:'0. 关于教程的说明',link:'/系统教程/VitePress/00.【教程介绍】我为什么要用VitePress'},
        {text:'1. VitePress介绍和安装',link:'/系统教程/VitePress/01.【邂逅初遇】VitePress介绍和安装'},
        {text:'2. 目录和package.json讲解',link:'/系统教程/VitePress/02.【目录文件】目录和packageJson讲解'},
        {text:'3. 关于index.md的设置',link:'/系统教程/VitePress/03.【首页设置】关于index.md的设置'},
        {text:'4. 顶部导航栏设置',link:'/系统教程/VitePress/04.【导航管理】顶部导航栏的设置'},
      ]
    }],
    '/生活分享/':[{
      text:'生活分享',
      items: [
        
      ]
    }]
  }

这样就实现了动态设置侧边导航栏了。

折叠设置

当你的侧边栏很多时，折叠起来会让网站变的美观。这时候你就可以使用 collapsed选项，它会显示一个切换按钮来隐藏/显示每个部分。

为了实现折叠效果，可以将Vitepress课程的侧边栏改造为基础和高级两个部分。(当然我们还没有那么多课程)

export default {
    '/系统教程/VitePress/':[{
      text:'基础课程',
   
      items:[
        {text:'0. 关于教程的说明',link:'/系统教程/VitePress/00.【教程介绍】我为什么要用VitePress'},
        {text:'1. VitePress介绍和安装',link:'/系统教程/VitePress/01.【邂逅初遇】VitePress介绍和安装'},
        {text:'2. 目录和package.json讲解',link:'/系统教程/VitePress/02.【目录文件】目录和packageJson讲解'},
        {text:'3. 关于index.md的设置',link:'/系统教程/VitePress/03.【首页设置】关于index.md的设置'},
        {text:'4. 顶部导航栏设置',link:'/系统教程/VitePress/04.【导航管理】顶部导航栏的设置'},
        {text:'5. 侧边栏Sidebar的设置',link:'/系统教程/VitePress/05.【侧边导航】侧边栏Sidebar的设置'},
      ]
    },
    {
      text:'高级课程',
  
      items:[
        // 这里为了实现效果，我们去掉了【课程介绍的链接】
        {text:'1. VitePress介绍和安装',link:'/系统教程/VitePress/01.【邂逅初遇】VitePress介绍和安装'},
        {text:'2. 目录和package.json讲解',link:'/系统教程/VitePress/02.【目录文件】目录和packageJson讲解'},
        {text:'3. 关于index.md的设置',link:'/系统教程/VitePress/03.【首页设置】关于index.md的设置'},
        {text:'4. 顶部导航栏设置',link:'/系统教程/VitePress/04.【导航管理】顶部导航栏的设置'},
        {text:'5. 侧边栏Sidebar的设置',link:'/系统教程/VitePress/05.【侧边导航】侧边栏Sidebar的设置'},
      ]
    },
  ]
  }

在刚才的 Vitepress导航部分加上collapsed选项，然后赋予值为true。这时候侧边栏就变成了折叠状态。

 {
      text:'高级课程',
      collapsed:true,
      items:[
        // 这里为了实现效果，我们去掉了【课程介绍的链接】
        {text:'1. VitePress介绍和安装',link:'/系统教程/VitePress/01.【邂逅初遇】VitePress介绍和安装'},
        {text:'2. 目录和package.json讲解',link:'/系统教程/VitePress/02.【目录文件】目录和packageJson讲解'},
        {text:'3. 关于index.md的设置',link:'/系统教程/VitePress/03.【首页设置】关于index.md的设置'},
        {text:'4. 顶部导航栏设置',link:'/系统教程/VitePress/04.【导航管理】顶部导航栏的设置'},
        {text:'5. 侧边栏Sidebar的设置',link:'/系统教程/VitePress/05.【侧边导航】侧边栏Sidebar的设置'},
      ]
    },

这时候再进入时侧边栏就是折叠状态了。

05.【侧边导航】侧边栏Sidebar的设置 ​

侧边栏基本配置 ​

形成单独页面 ​

动态显示侧边栏 ​

折叠设置 ​

侧边栏基本配置

形成单独页面

动态显示侧边栏

折叠设置