目录结构
整体布局
text
docs/
├─ .vitepress/
│ ├─ config.mts # 站点配置:导航、侧边栏、搜索
│ └─ theme/ # 自定义主题
├─ guide/ # 集合一:使用指南
├─ notes/ # 集合二:学习笔记
├─ examples/ # 集合三:示例
├─ public/ # 静态资源,原样拷贝到产物根目录
└─ index.md # 首页1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
一套文档 = 一个文件夹
每套文档独立放一个文件夹,文件夹名就是 URL 前缀:
| 文件夹 | 访问地址 | 侧边栏的键 |
|---|---|---|
docs/guide/ | /guide/ | '/guide/' |
docs/notes/ | /notes/ | '/notes/' |
每个文件夹里的 index.md 就是这套文档的入口页,所以导航里写 /guide/ 会直接打开它。
侧边栏怎么配
themeConfig.sidebar 从数组换成对象后,键是路径前缀,值是这个前缀下的目录:
ts
sidebar: {
'/guide/': [
{
text: '使用指南',
items: [
{ text: '总览', link: '/guide/' },
{ text: '快速开始', link: '/guide/getting-started' }
]
}
]
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
访问 /guide/getting-started 时只会渲染 '/guide/' 这一份,多套文档之间互不干扰。
导航负责切换
顶部的 nav 是集合之间的切换入口。加上 activeMatch 后,只要 URL 命中该前缀,对应导航项就会高亮:
ts
nav: [
{ text: '使用指南', link: '/guide/', activeMatch: '/guide/' }
]1
2
3
2
3
没有匹配到任何前缀的页面(比如首页)不会显示侧边栏。