Vitepress Auto-generate Sidebar Data Plugin

Vite Plugin: vite-plugin-vitepress-auto-sidebar

Background

A while ago, I started migrating my personal blog site's tech stack from vuepress to vitepress. The migration process was quite straightforward, and the overall experience improved significantly. The default theme also looked much better.

This is the version you are currently visiting~

However, during the process, I encountered an issue. Vitepress officially does not support automatic generation of sidebars, unlike vuepress, which can generate them automatically.

This dilemma led me to an idea: could I write a vitepress plugin to handle the sidebar generation for me? After some research, I found that the official Vitepress plugin system is not available yet.

Considering that Vitepress is based on Vite, I thought, why not write a Vite plugin instead? And that's how vite-plugin-vitepress-auto-sidebar came to be.

Features

• Automatically creates sidebar data.
• Real-time updates to the sidebar data by monitoring file changes.

Installation

npm install vite-plugin-vitepress-auto-sidebar

Usage

Simply add the plugin in the .vitepress/config.ts file:

import AutoSidebar from 'vite-plugin-vitepress-auto-sidebar';
export default defineConfig({
  vite:{
    plugins:[
      // add plugin
      AutoSidebar()
    ]
  },
})

• Plugin Project Link: vite-plugin-vitepress-auto-sidebar

• Example Code: example code

May 7, 2023

The plugin has been updated to version 1.4.0, now supporting prefix deletion and sidebar collapsing. (See readme.md for details)

Special thanks to @酱路油过 for contributing code to the plugin!

If you encounter any issues or have suggestions during use, feel free to raise an issue or pull request~ 😊😊