前言

这两天在尝试用语雀＋ vuepress ＋ github 搭建个人博客。

小破站地址 ：王天的 web 进阶之路

语雀作为编辑器，发布文档推送 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 可以修改左侧菜单，但是一个个手动修改这忒麻烦了啊啊啊啊。那如何批量生产菜单配置项呢？

递归函数呀呀呀呀呀呀