Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qc2168/vite-plugin-vitepress-auto-sidebar
The vite plugin that automatically generates sidebar data by scanning directories, based on vitepress
https://github.com/qc2168/vite-plugin-vitepress-auto-sidebar
vite vite-plugin vitepress vitepress-sidebar
Last synced: about 20 hours ago
JSON representation
The vite plugin that automatically generates sidebar data by scanning directories, based on vitepress
- Host: GitHub
- URL: https://github.com/qc2168/vite-plugin-vitepress-auto-sidebar
- Owner: QC2168
- License: mit
- Created: 2023-01-20T06:42:44.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-17T14:08:34.000Z (about 1 month ago)
- Last Synced: 2025-01-29T17:11:38.633Z (about 21 hours ago)
- Topics: vite, vite-plugin, vitepress, vitepress-sidebar
- Language: TypeScript
- Homepage:
- Size: 429 KB
- Stars: 113
- Watchers: 1
- Forks: 15
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-vitepress-auto-sidebar
The vite plugin that automatically generates sidebar data by scanning directories, based on vitepress
[](http://blog.csdn.net/a_zhon)
[](http://blog.csdn.net/a_zhon)
[](http://blog.csdn.net/a_zhon)
## ✨ 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
```bash
# recommend using pnpm packageManager
pnpm i vite-plugin-vitepress-auto-sidebar
# or yarn
yarn add vite-plugin-vitepress-auto-sidebar
# or npm
npm install vite-plugin-vitepress-auto-sidebar
```
add plugin in `.vitepress/config.ts`
```typescript
import AutoSidebar from 'vite-plugin-vitepress-auto-sidebar';
export default defineConfig({
vite: {
plugins: [
// add plugin
AutoSidebar({
// You can also set options to adjust sidebar data
// see option document below
})
]
},
})
```
> 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
#### Parameters
| name | description | type | default |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------- |
| ignoreList | ignore specified folder | `string[]` | `true` |
| path | create scan path for the sidebar | `string` | `/docs` |
| scanRootMdFiles | scan the md file in path | `boolean` | `true` |
| 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` | |
| titleFromFile | read title from md file | `boolean` | `false` |
| titleFromFileByYaml | read title from yaml config | `boolean` | `false` |
#### Hooks
You can change the injected sidebar object using the hooks parameter
| name | description | type | default |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------- |
| 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[]` | |
## License
[MIT](./LICENSE) License © 2023 [QC2168](https://github.com/QC2168)