Vitepress设置独立侧边栏文件

Vitepress设置独立侧边栏文件，有两种方案：

1. 原生 VitePress（无插件）：每个目录下放单独的 sidebar.mjs，然后在 .vitepress/config.mjs 集中导入合并（推荐可控、无依赖）
2. 插件自动方案（vitepress-sidebar）：目录下放 sidebar.config.json，自动扫描生成侧边栏，不用手动写菜单数组

⚠️ 原生本身不支持自动读取子目录里的sidebar文件，必须自己导入或者借助插件

方案1：原生手动拆分（推荐，零插件）

目录结构示例

docs/
├─ guide/
│  ├─ index.md
│  ├─ one.md
│  └─ sidebar.mjs  # guide目录自己的侧边栏配置
├─ api/
│  ├─ index.md
│  ├─ demo.md
│  └─ sidebar.mjs  # api目录自己的侧边栏配置
└─ .vitepress/
   └─ config.mjs

docs/guide/sidebar.mjs

export default [
  {
    text: '指南',
    items: [
      { text: '介绍', link: '/guide/' },
      { text: '第一章', link: '/guide/one' }
    ]
  }
]

docs/api/sidebar.mjs

export default [
  {
    text: '接口文档',
    items: [
      { text: '总览', link: '/api/' },
      { text: '示例', link: '/api/demo' }
    ]
  }
]

.vitepress/config.mjs 汇总引入

import { defineConfig } from 'vitepress'
import guideSidebar from '../guide/sidebar.mjs'
import apiSidebar from '../api/sidebar.mjs'

export default defineConfig({
  themeConfig: {
    sidebar: {
      '/guide/': guideSidebar,
      '/api/': apiSidebar
    }
  }
})

进阶：可以用 import.meta.glob 自动批量读取所有目录下的 sidebar.mjs，不用一个个手动 import

方案2：vitepress-sidebar 插件（自动扫描，更省事）

这个插件支持每个目录放配置文件自动生成侧边栏，不用手动维护菜单数组

npm i -D vitepress-sidebar

目录：docs/guide/sidebar.config.json

{
  "useTitleFromFileHeading": true
}

.vitepress/config.mjs

import { defineConfig } from 'vitepress'
import { withSidebar } from 'vitepress-sidebar'

export default defineConfig(withSidebar({
  title: '文档',
  // 其他配置
}))

插件会自动遍历目录、读取各个文件夹里的配置，自动生成对应路径的侧边栏。

补充

• 如果想要完全自动根据md文件生成菜单，不用手写任何sidebar配置，优先 vitepress-sidebar
• 如果菜单需要高度自定义、不想引入第三方插件，就用方案1，每个目录独立 sidebar.mjs