vitepress-generate-sidebar v1.0.81

Generator sidebar for Vitepress based on file and directory structure.

Note

This pkg extends vitepress-plugin-autobar, Continuous integration requires an online build, so this package is released.

Install

npm install -D vitepress-generate-sidebar

API

getSideBar

getSideBar(rootDir = './', options?: Options)

• rootDir: string Directory to get configuration for
• options: OptionsOption to create configuration

Returns sidebar configuration for VitePress calculated using structure of directory and files in given path.

Type of Options:

interface Options {
  ignoreDirectory?: Array<string>, // Directoty path to ignore from being captured.
  ignoreMDFiles?: Array<string>, // File path to ignore from being captured.
}

Usage

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

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

Ignore Some path

You can pass options to keep some path out of the sidebar.

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

module.exports = {
  // ...
  themeConfig: {
    // ...
    sidebar: getSideBar("./docs", {
      ignoreMDFiles: ['index'],
      ignoreDirectory: ['node_modules'],
    }),
  },
};

How it work

You directory may be like this.

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

Generator sidebar

• Then getSideBar will return sidebar data like this. It will work well for vitepress.

• Sidebar will order by file path.

• Number in the file path will be removed.

[
    {
        "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"
            }
        ]
    }
]

The configuration for the sidebar in Vitepress

Future

If vitepress supports plugins, this component will extend the functionality of plugins.

License

MIT

Copyright (c) 2022-present, luciozhang