前言
因为官网介绍的都只有一个‘一级标题’ 只有一个markdown文件
最终编译后也只有一个html文件,类似于spa 单页项目
如何才有多页项目呢
百度查询 网上插件库有很多,大部分不能用,
后来还是自己想出来的,很简单,办法如下
方案
新建文件 utils>gen-side.js
const fs = require('fs');
fs.readdir('./docs',(err,files)=>{
if (err) {
console.log(err);
} else{
const sidebar = files.filter(item=>item.indexOf('.md')>-1&&item!=='index.md');
sidebar.unshift('index.md');
sidebar.sort((a,b)=>{return a - b});
const content = `module.exports =${JSON.stringify(sidebar)}`;
fs.writeFile('./utils/sidebar.js', content, { encoding: 'utf8' }, err => {console.log(err);});
}
})
或者
const fs = require('fs');
fs.readdir('./docs', (err, files) => {
if (err) {
console.log(err);
} else {
const sidebar = files.filter(item => item.indexOf('.md') > -1 && item !== 'index.md');
sidebar.sort((a, b) => { return a - b });
const sidebarFull = sidebar.map(item => ({
text: item.substr(0, item.length - 3),
link: item
}))
sidebarFull.unshift({
text: '简介',
link: 'index.md'
});
const content = `module.exports =${JSON.stringify(sidebarFull)}`;
fs.writeFile('./utils/sidebar.js', content, { encoding: 'utf8' }, err => { console.log(err); });
}
})
然后引入使用
[项目名]/docs/.vuepress/config.js
const sidebar = require('../../utils/sidebar');
module.exports = {
lang: 'zh-CN',
title: 'Iconify',
description: 'JavaScript高级程序设计 红宝书',
base: '/iconify-book/dist/',
dest: './dist',
themeConfig: {
sidebar, //重点这里 引入
navbar: [
{
text: '博客',
link: 'https://www.cnblogs.com/dshvv',
},
{
text: '语雀',
link: 'https://www.yuque.com/dingshaohua',
}
]
}
}
每次新建了一个markdown文件的时候,只需要运行一下 node ./utils/gen-side.js
然后再启动项目即可npm run docs-dev