# 前言
这两天在尝试用语雀+ vuepress + github 搭建个人博客。 小破站地址 :王天的 web 进阶之路open in new window 语雀作为编辑器,发布文档推送 github,再自动打包部署,大概流程如下。
# 问题
我使用的elog
插件批量导出语雀文档。elog
采用的配置是所有文章平铺导出,没有按照语雀知识库目录生成markdown
,这导致 vuepress 侧边栏无法和语雀一致,如下图。
上图,左侧是语雀知识库,右侧是导出到 vuepress 展示的效果,很明显没有目录这很影响阅读体验呀
# 解决
在查阅 vuepress 文档后,发现配置silderbar.ts
可以自定义侧边栏目录,配置参数如下:
export default {
theme: defaultTheme({
// 可折叠的侧边栏
sidebar: {
"/web/": [
{
text: "王天的web进阶手册",
collapsible: true, // 目录是否折叠
children: ["/reference/cli.md", "/reference/config.md"], // 文档目录
},
{
text: "王天的魔法工具箱",
collapsible: true,
children: [
"/reference/bundler/vite.md",
"/reference/bundler/webpack.md",
],
},
],
},
}),
};
# 递归生成菜单
配置sidebar.ts
可以修改左侧菜单,但是一个个手动修改这忒麻烦了啊啊啊啊。那如何批量生产菜单配置项呢?
递归函数呀呀呀呀呀呀