如何用vuepress的默認主題自動生成側邊欄

前言

最近在幫公司弄一個組件庫，所以想著寫一個文檔，于是就想到了用vuepress來寫，vuepress界面簡潔，基于vue，上手比較容易，而且還支持在md里面寫vue語法。

開始

由于官網(wǎng)文檔里面寫的都是怎么生成側邊欄，必須將每個文檔的路由進行配置，沒有寫怎么自動生成側邊欄，這樣一來文檔一多的話就很麻煩了，網(wǎng)上試了很多方法都不行，最后找了這位同學淺墨散人的方法

1文件結構

目錄結構

這里要注意一下 about 跟 blog 里的文件夾是要在導航欄里配置的，每個路由下一個要有 index.md 文件，不然后面會報錯，導航欄配置官網(wǎng)有介紹這里就不說明了，具體請看導航欄配置

1. 新建遍歷方法 initPage.js

const fs = require('fs');
// 排除檢查的文件
var excludes = ['.DS_Store']

var filehelper = {
    getFileName:function(rpath) {
        let filenames = [];
        // let fileImg = /\.(png|jpe?g|gif|webp)(\?.*)?$/;
        let fileTypes = /\.md$/; //只匹配以md結尾的文件
        fs.readdirSync(rpath).forEach(file => {
            if (excludes.indexOf(file) < 0 ) {
                fullpath = rpath+"/"+file
                var fileinfo = fs.statSync(fullpath)
                if(fileinfo.isFile()){
                    // if(file.indexOf('.md') > 0) {
                    if(fileTypes.test(file) > 0) {
                        if (file === 'index.md') {
                            file = '';
                        } else {
                            file = file.replace('.md', '');
                        }
                        filenames.push(file);
                    }
                }
            }
        })
        // console.log(filenames)
        filenames.sort(); // 排序
        return filenames;
    }
}
module.exports = filehelper;

這里我稍微修改了下，原本只是判斷 index.md 跟其它文件，當我在其中一個目錄里新建圖片文件夾的時候就出問題了，它把圖片也一起遍歷進去了，導致最后編譯出錯。
所以這里我加多了一個正則判斷，能正常顯示了但是發(fā)現(xiàn)每個分類下的側欄只顯示出來一個，檢查發(fā)現(xiàn)是我正則寫成了 /\.md$/gi ，全文查找，所以只匹配最后一個滿足條件的，改成這樣 /\.md$/ 就沒問題了。
還有一個方法是用 indexOf() 判斷文件名是否含有 .md ,簡單粗暴。

2. 新建 index.js 文件

index.js 主要是接收參數(shù)，將參數(shù)轉(zhuǎn)換成對象格式，方便在 config.js 里使用

const utils = {
  genSidebar: function (title, children = [''], collapsable = true, sidebarDepth = 2) {
    var arr = new Array();
    arr.push({
      title,
      children,
      collapsable,
      sidebarDepth
    })
    return arr;
  }
};

module.exports = utils;

3. config.js 里使用

const path = require("path")
const rootpath = path.dirname(__dirname) //執(zhí)行一次dirname將目錄定位到docs目錄
const utils = require('./utils/index.js');
const filehelper = require('./utils/initPage.js');

module.exports = {
  //...其它配置

  themeConfig: {
    sidebar: {
      '/blog/css/': utils.genSidebar('css', filehelper.getFileName(rootpath+"/blog/css/"), false),
      '/blog/javascript/': utils.genSidebar('頁面js相關', filehelper.getFileName(rootpath+"/blog/javascript/"), false),
      '/blog/html/': utils.genSidebar('頁面html相關', filehelper.getFileName(rootpath+"/blog/html/"), false),
      '/blog/plugins/': utils.genSidebar('插件', filehelper.getFileName(rootpath+"/blog/plugins/"), false),
      '/blog/ui/': utils.genSidebar('組件', filehelper.getFileName(rootpath+"/blog/ui/"), false),
      '/about/': utils.genSidebar('關于', filehelper.getFileName(rootpath+"/about/"), false),
    }, // 側邊欄配置
  },
}

上面是根據(jù)我項目結構來配置的，實際情況根據(jù)你的目錄結構來配置。

總結

vuepress使用起來還是比較方便的，不僅可以用來寫文檔，還可以用來寫博客，我自己也搭了一個博客放在github上，平常有一些想法或總結就可以在上面分享了。