基于目录为VitePress生成侧边栏

luciozhang

发布于 2023-04-22 16:26:25

1.4K0

发布于 2023-04-22 16:26:25

文章被收录于专栏：前端lucio

今天封装了一个用于自动生成VitePress 侧边栏的npm包，分享一下，求求帮忙Star。

github

vitepress-plugin-autobar

这应该是目前最简洁好用的生成VitePress 侧边栏的工具了。

VitePress

VitePress 是基于 Vite构建的文档网站框架，是 VuePress 的升级版本。

Vue3的文档就是用VitePress搭建的。

安装

npm install -D vitepress-plugin-autobar

使用

import { getSideBar } from 'vitepress-plugin-autobar'

module.exports = {
  // ...
  themeConfig: {
    // ...
    sidebar: getSideBar("./docs"),
  },
};

How it work？

如果你的目录是下面这样的。

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ 01.Introduction
│  │  └─ START.md
│  ├─ 02.Utils
│  │  └─ dateUtil.md
│  │  └─ storeUtil.md
│  └─ index.md

调用 getSideBar 会生成下面这样的侧边栏数据。

文件的编号会被用于排序，并被自动去除。

[
    {
        "text":"Introduction",
        "items":[
            {
                "text":"START",
                "link":"01.Introduction/START"
            }
        ]
    },
    {
        "text":"Utils",
        "items":[
            {
                "text":"dateUtil",
                "link":"02.Utils/dateUtil"
            },
            {
                "text":"storeUtil",
                "link":"02.Utils/storeUtil"
            }
        ]
    },
    {
        "text":"Index",
        "items":[
            {
                "text":"Index",
                "link":"index"
            }
        ]
    }
]

VitePress的侧边栏配置