VuePress 自动生成导航栏和侧边栏，不用插件

前言

VuePress是一个非常方便的网页生成器，本人很喜欢用它来写Markdown笔记。

不过官方教程里的导航栏和侧边栏有些麻烦。具体有一下几种方法：

1. 手动配置

每次增加新的笔记都要配置一下，太麻烦，下一个。

2. 官方的Auto sidebar，自动的

但功能太少，不能定制，不太好用，下一个。

3. 第三方插件

要安装，还要使用固定的命名方式，麻烦，不够自由

那么有没有更好的方法呢？

你好，有的！

不废话，上代码

1. 假设项目目录如下

   vuepress_project/
       |_docs/
           |_.vuepress/
               |_config.js
           |_pages/
               |_Python/
                   |_Python-01-环境.md
                   |_Python-02-数据类型.md
   

2. 源码：可以直接放在config.js文件，也可以单独放到一个js文件中然后导入，我这里直接放到config.js里了。

   const fs = require('fs');
   
   // 自动获取侧边栏
   function getSideBar(folder) {
       // 只能用绝对路径
       path = 'D:/PersonalProject/vue_press/docs/pages/' + folder + '/';
       let file_list = fs.readdirSync(path);
       for (let i = 0; i < file_list.length; i++) {
           // 可根据需求定制文件名，但是不能有.md后缀
           file_list[i] = file_list[i].slice(0, -3);
       }
       return file_list;
   }
   
   // 自动获取导航栏
   function getNav(folder) {
       // 只能用绝对路径
       path = 'D:/PersonalProject/vue_press/docs/pages/' + folder + '/';
       let file_list = fs.readdirSync(path);
       let nav_text = [];
       for (let i = 0; i < file_list.length; i++) {
           nav_text.push({
               // 这里也可以根据需求定制，同样不能有后缀
               text: file_list[i].slice(0, -3),
               link: '/pages/' + folder + '/' + file_list[i].slice(0, -3)
               });
       }
       return nav_text;
   }
   

3. 使用：在config.js文件中设置nav和sidebar

   module.exports = {
       ......
       themeConfig: {
           ......
           nav: [
               {
                   text: 'Python',
                   items: getNav('Python')
               },
           ],
           sidebar: {
               '/pages/Python/': getSideBar('Python'),
           }
       }
   }
   
   

4. 之后只有每次增加新的文件夹的时候增加一条nav和sidebar即可

效果

大家还可以通过我的 github个人主页 或 gitee个人主页 来查看效果