vite-plugin-vitepress-auto-sidebar

The vite plugin that automatically generates sidebar data by scanning directories, based on vitepress

✨ Feature

🚀 Automatically create the sidebar data and injected into config.ThemeConfig.sidebar

🤖 Listen globally for *.md files to automatically update sidebar data when they are added or deleted

🕯️ Usage

install vite-plugin-vitepress-auto-sidebar

1# recommend using pnpm packageManager
2pnpm i @jiek/vite-plugin-vitepress-auto-sidebar
3# or yarn
4yarn add @jiek/vite-plugin-vitepress-auto-sidebar
5# or npm
6npm install @jiek/vite-plugin-vitepress-auto-sidebar

add plugin in .vitepress/config.ts

1import AutoSidebar from '@jiek/vite-plugin-vitepress-auto-sidebar';
2
3export default defineConfig({
4  vite: {
5    plugins: [
6      // add plugin
7      AutoSidebar({
8        // You can also set options to adjust sidebar data
9        // see option document below
10      })
11    ]
12  },
13})

Warning, you must clear the sidebar objects in the config.ts or it may not work properly

pnpm run dev

 [auto-sidebar] injected sidebar data successfully

If you see the above message, it means the plugin is working properly, otherwise there may be a problem

🛠️ Options

name	description	type	default
ignoreList	ignore specified folder	string[]	true
path	create scan path for the sidebar	string	/docs
ignoreIndexItem	ignore the page sidebar with only index.md	boolean	false
collapsed	By adding collapsed option to the sidebar group, it shows a toggle button to hide/show each section,For specific usage, please refer to VitePress	boolean	false
deletePrefix	deletes the md file prefix	string
sideBarResolved	receive complete sidebar objects for custom modifications	(data: DefaultTheme.SidebarMulti) => DefaultTheme.SidebarMulti
sideBarItemsResolved	receive complete sidebar subItem objects for custom modifications	(data: DefaultTheme.SidebarItem[]) => DefaultTheme.SidebarItem[]
beforeCreateSideBarItems	obtain a list of file names scanned before generating sidebar subitems. If you want to sort sidebar data, it is recommended to use it	(data: string[]) => string[]
titleFromFile	read title from md file	boolean	false
titleFromFileByYaml	read title from yaml config	boolean	false

License

MIT License © 2024 YiJie