vuePress2.x 多页面 多目录生成方案
前言
因为官网介绍的都只有一个‘一级标题’ 只有一个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');
const { defaultTheme } = require('@vuepress/theme-default')
module.exports = {
lang: 'zh-CN',
title: 'JavaScript高级程序设计(第4版)',
description: 'JavaScript高级程序设计 红宝书',
base: '/red-treasure-book/dist/',
dest: './dist',
head: [['script', { src: './js/head.js' }]],
theme: defaultTheme({
sidebar,
navbar: [
{
text: '博客',
link: 'https://www.cnblogs.com/dshvv',
},
{
text: '语雀',
link: 'https://www.yuque.com/dingshaohua',
},
{
text: '关于我',
link: 'https://www.baidu.com/s?wd=甲乙丙丁少',
}
]
})
}
每次新建了一个markdown文件的时候,只需要运行一下 node ./utils/gen-side.js
然后再启动项目即可npm run docs-dev
不同子路径中使用不同的侧边栏
如果你想在不同子路径中使用不同的侧边栏,你可以将该配置项设置为 侧边栏对象 :
export default {
theme: defaultTheme({
// 侧边栏对象
// 不同子路径下的页面会使用不同的侧边栏
sidebar: {
'/guide/': [
{
text: 'Guide',
children: ['/guide/README.md', '/guide/getting-started.md'],
},
],
'/reference/': [
{
text: 'Reference',
children: ['/reference/cli.md', '/reference/config.md'],
},
],
},
}),
}
用这个脚本 生成即可
import fs from 'fs';
import path from 'path';
// 此脚本用于vuepress生成菜单 支持不同路由对应不同目录(我这里只支持两层嵌套目录)
const travel = (dir) => {
const sidebar = {};
const handel = (dir) => {
for (const file of fs.readdirSync(dir)) {
if (file !== '.vuepress' && file !== 'README.md' && file !== '_category_.json' && file !== 'index.md') {
const pathName = path.join(dir, file);
const pathNameArr = pathName.split('\\'); // 根据这个判断当前遍历到第几次了
if (pathNameArr.length === 2) { // 遍历第1层的时候 将文件夹作为pathNameSpace
sidebar[`/${file}/`] = [];
} else if (pathNameArr.length === 3) { // 遍历第2层的时候 将文件夹作为折叠导航,文件则不导航
if (fs.statSync(pathName).isDirectory()) {
console.log(pathName);
sidebar[`/${pathNameArr.at(1)}/`].push({
text: pathNameArr.at(-1).split('_').join(' '),
link: (pathName.replace('docs', '') + '\\index.md').split('\\').join('/'),
collapsible: true,
children: []
});
} else {
sidebar[`/${pathNameArr.at(1)}/`].push({
text: pathNameArr.at(-1).replace('.md', '').split('_').join(' '),
link: pathName.replace('docs', '').split('\\').join('/')
});
}
} else if (pathNameArr.length === 4) { // 遍历第3层的时候 3层的文件夹就是你的markdown,不能再有目录 我这里只支持两层嵌套目录
const current = sidebar[`/${pathNameArr.at(1)}/`].find((item) => {
return item.text == pathNameArr.at(2).split('_').join(' ')
});
current.children.push({
text: pathNameArr.at(-1).replace('.md', '').split('_').join(' '),
link: pathName.replace('docs', '').split('\\').join('/'),
});
}
if (fs.statSync(pathName).isDirectory()) {
handel(pathName);
} else {
}
}
}
}
handel(dir);
return sidebar;
}
const sidebar = travel('docs/')
const content = `export default ${JSON.stringify(sidebar, null, 2)}`;
fs.writeFile("./utils/sidebar.ts", content, { encoding: "utf8" }, (err) => {
console.log(err);
});