# vite-plugin-vitepress-simple-sidebar

> 自动生成 vitepress 侧边栏目录的插件

Latest version **1.0.1** (published 2024-12-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-vitepress-simple-sidebar
pnpm add vite-plugin-vitepress-simple-sidebar
yarn add vite-plugin-vitepress-simple-sidebar
bun add vite-plugin-vitepress-simple-sidebar
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2024-12-16 |
| First published | 2024-03-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.0.0 |
| Dependencies | 0 |
| Unpacked size | 8.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | lijiayuan365 |
| Maintainers | lijiayuan |
| Keywords | vite-plugin, vitepress, vitepress sidebar |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-vitepress-simple-sidebar
- Repository: https://github.com/lijiayuan365/vite-plugin-vitepress-sidebar
- Homepage: https://github.com/lijiayuan365/vite-plugin-vitepress-sidebar#readme
- Issues: https://github.com/lijiayuan365/vite-plugin-vitepress-sidebar/issues
- npm.io page: https://npm.io/package/vite-plugin-vitepress-simple-sidebar

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2024-12-16
- 1.0.0 — 2024-03-29
- 0.0.1 — 2024-03-28

## README

# vite-plugin-vitepress-simple-sidebar
[中文文档](./README-CN.md)

**Note** This project is no longer maintained and has been merged into this [project](https://github.com/lijiayuan365/vite-plugin-vitepress-utils) for modifications.

`vite-plugin-vitepress-simple-sidebar` is a plugin designed to automatically generate sidebar configurations for VitePress projects. It reads the file and subdirectory structure in the specified directory (default to the `.vitepress` folder) to create a navigation sidebar, simplifying the configuration process and improving development efficiency.

## Example Directory Structure

Assuming your project has the following directory structure:

```sh
.
├── .vitepress
├── component.md
├── experience
│   ├── 2024
│   │   └── makeblock-interview.md
│   └── index.md
├── index.md
├── interview
│   ├── Vue
│   │   └── test.md
│   ├── Vue3
│   │   └── index.md
│   └── index.md
├── markdown-examples.md
└── test.md
```

Using this plugin, the following sidebar configuration will be automatically generated:

```json
{
  "/experience/": [
    {
      "text": "2024",
      "items": [
        {
          "text": "makeblock-interview",
          "link": "/experience/2024/makeblock-interview"
        }
      ],
      "collapsed": true
    },
    {
      "text": "index",
      "link": "/experience/index"
    }
  ],
  "/interview/": [
    {
      "text": "Vue",
      "items": [
        {
          "text": "test",
          "link": "/interview/Vue/test"
        }
      ],
      "collapsed": true
    },
    {
      "text": "Vue3",
      "items": [
        {
          "text": "index",
          "link": "/interview/Vue3/index"
        }
      ],
      "collapsed": true
    },
    {
      "text": "index",
      "link": "/interview/index"
    }
  ]
}
```

## Installation

Install the `vite-plugin-vitepress-simple-sidebar` plugin in your project:

```sh
# Recommended to use pnpm
pnpm i vite-plugin-vitepress-simple-sidebar -D

# Or use npm
npm i vite-plugin-vitepress-simple-sidebar --save-dev
```

## Configuration

In your VitePress configuration file (usually `.vitepress/config.mts` or `.vitepress/config.ts`), import and configure the plugin:

```ts
// .vitepress/config.mts
import { autoSidebar } from 'vite-plugin-vitepress-simple-sidebar'

export default defineConfig({
  vite: {
    plugins: [
      autoSidebar({
        // Custom configuration can be added here, see below for details
      }),
    ],
  },
});
```

## Plugin Configuration Options

The `autoSidebar` function accepts an optional configuration object `SidebarOptions` to customize the sidebar generation behavior:

```ts
export interface SidebarOptions {
  includeDirs?: string[];
  excludeDirs?: string[];
  includeFiles?: string[];
  excludeFiles?: string[];
  // Additional configuration options will be added in future versions
}
```

- `includeDirs`: Specify directories to include in sidebar generation.
- `excludeDirs`: Specify directories to exclude from sidebar generation.
- `includeFiles`: Specify files to include in the sidebar.
- `excludeFiles`: Specify files to exclude from the sidebar.

By default, if no configuration parameters are passed, the plugin will scan the `.vitepress` directory and generate the corresponding sidebar configuration.

## Future Plans

The `vite-plugin-vitepress-simple-sidebar` plugin is still under active development, with more configuration options and features to be added to meet the needs of different projects. We welcome contributions and feedback from the community to jointly create a more perfect VitePress plugin ecosystem.

translated by AI

---
_Source: https://npm.io/package/vite-plugin-vitepress-simple-sidebar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._