一个vuepress配置问题,引发的js递归算法思考

2023-10-18 19:24:30 浏览数 (2)

# 前言

这两天在尝试用语雀+ vuepress + github 搭建个人博客。 小破站地址 :王天的 web 进阶之路open in new window 语雀作为编辑器,发布文档推送 github,再自动打包部署,大概流程如下。

# 问题

我使用的elog插件批量导出语雀文档。elog采用的配置是所有文章平铺导出,没有按照语雀知识库目录生成markdown,这导致 vuepress 侧边栏无法和语雀一致,如下图。

上图,左侧是语雀知识库,右侧是导出到 vuepress 展示的效果,很明显没有目录这很影响阅读体验呀

# 解决

在查阅 vuepress 文档后,发现配置silderbar.ts可以自定义侧边栏目录,配置参数如下:

代码语言:javascript复制
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 可以修改左侧菜单,但是一个个手动修改这忒麻烦了啊啊啊啊。那如何批量生产菜单配置项呢?

递归函数呀呀呀呀呀呀

0 人点赞