【vuepress】自动生成侧边栏
如何用vuepress的默认主题自动生成侧边栏前言 最近在帮公司弄一个组件库,所以想着写一个文档,于是就想到了用vuepress来写,vuepress界面简洁,基于vue,上手比较容易,而且还支持在md里面写vue语法。
开始 由于官网文档里面写的都是怎么生成侧边栏,必须将每个文档的路由进行配置,没有写怎么自动生成侧边栏,这样一来文档一多的话就很麻烦了,网上试了很多方法都不行,最后找了这位同学浅墨散人的方法
1文件结构
文章图片
目录结构 这里要注意一下
about
跟 blog
里的文件夹是要在导航栏里配置的,每个路由下一个要有 index.md
文件,不然后面会报错,导航栏配置官网有介绍这里就不说明了,具体请看导航栏配置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
跟其它文件,当我在其中一个目录里新建图片文件夹的时候就出问题了,它把图片也一起遍历进去了,导致最后编译出错。所以这里我加多了一个正则判断,能正常显示了但是发现每个分类下的侧栏只显示出来一个,检查发现是我正则写成了
/\.md$/gi
,全文查找,所以只匹配最后一个满足条件的,改成这样 /\.md$/
就没问题了。还有一个方法是用
indexOf()
判断文件名是否含有 .md
,简单粗暴。2. 新建
index.js
文件index.js
主要是接收参数,将参数转换成对象格式,方便在 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) //执行一次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),
}, // 侧边栏配置
},
}
上面是根据我项目结构来配置的,实际情况根据你的目录结构来配置。
总结 【【vuepress】自动生成侧边栏】vuepress使用起来还是比较方便的,不仅可以用来写文档,还可以用来写博客,我自己也搭了一个博客放在github上,平常有一些想法或总结就可以在上面分享了。
推荐阅读
- 宽容谁
- 我要做大厨
- 增长黑客的海盗法则
- 画画吗()
- 2019-02-13——今天谈梦想()
- 远去的风筝
- 三十年后的广场舞大爷
- 叙述作文
- 20190302|20190302 复盘翻盘
- 学无止境,人生还很长