如何用vuepress的默認(rèn)主題自動生成側(cè)邊欄
前言
最近在幫公司弄一個(gè)組件庫，所以想著寫一個(gè)文檔伍伤，于是就想到了用vuepress來寫乳蛾，vuepress界面簡潔，基于vue够委，上手比較容易荐类，而且還支持在md里面寫vue語法。
開始
由于官網(wǎng)文檔里面寫的都是怎么生成側(cè)邊欄茁帽，必須將每個(gè)文檔的路由進(jìn)行配置玉罐，沒有寫怎么自動生成側(cè)邊欄，這樣一來文檔一多的話就很麻煩了潘拨，網(wǎng)上試了很多方法都不行厌小，最后找了這位同學(xué)淺墨散人的方法
1文件結(jié)構(gòu)
這里要注意一下 about 跟 blog 里的文件夾是要在導(dǎo)航欄里配置的，每個(gè)路由下一個(gè)要有 index.md 文件战秋，不然后面會報(bào)錯(cuò)璧亚，導(dǎo)航欄配置官網(wǎng)有介紹這里就不說明了，具體請看導(dǎo)航欄配置
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結(jié)尾的文件
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 跟其它文件癣蟋，當(dāng)我在其中一個(gè)目錄里新建圖片文件夾的時(shí)候就出問題了，它把圖片也一起遍歷進(jìn)去了狰闪，導(dǎo)致最后編譯出錯(cuò)疯搅。
所以這里我加多了一個(gè)正則判斷，能正常顯示了但是發(fā)現(xiàn)每個(gè)分類下的側(cè)欄只顯示出來一個(gè)埋泵，檢查發(fā)現(xiàn)是我正則寫成了 /\.md$/gi 幔欧，全文查找，所以只匹配最后一個(gè)滿足條件的丽声，改成這樣 /\.md$/ 就沒問題了礁蔗。
還有一個(gè)方法是用 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相關(guān)', filehelper.getFileName(rootpath+"/blog/javascript/"), false),
'/blog/html/': utils.genSidebar('頁面html相關(guān)', 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('關(guān)于', filehelper.getFileName(rootpath+"/about/"), false),
}, // 側(cè)邊欄配置
},
}
上面是根據(jù)我項(xiàng)目結(jié)構(gòu)來配置的，實(shí)際情況根據(jù)你的目錄結(jié)構(gòu)來配置霉撵。
總結(jié)
vuepress使用起來還是比較方便的磺浙，不僅可以用來寫文檔洪囤，還可以用來寫博客，我自己也搭了一個(gè)博客放在github上撕氧，平常有一些想法或總結(jié)就可以在上面分享了瘤缩。
