#
VitePress真是太好用了
2025-08-20
侧边栏与多级侧边栏
配置 VitePress 侧边栏与多级侧边栏,实现清晰的文档导航结构。通过配置
themeConfig.sidebar 选项,可以定义侧边栏的版块标题和链接列表,支持多级嵌套结构,方便用户快速定位和浏览文档内容。
侧边栏的基础样式
侧边栏菜单最简单的形式是传入一个链接数组。第一级菜单项定义了侧边栏的“版块”。它应该包含text(版块标题)和items(实际的导航链接)。
export default {
themeConfig: {
sidebar: [
{
text: '一级标题A',
items: [
{ text: '二级标题A', link: '/A文章位置' },
{ text: '二级标题B', link: '/B文章位置' },
...
]
},
{
text: '一级标题B',
items: [
{ text: '二级标题C', link: '/C文章位置' },
{ text: '二级标题D', link: '/D文章位置' },
...
]
}
]
}
}每个链接都应该以link开头指定实际文件的路径/。如果在链接末尾添加斜杠,则会显示index.md相应的目录。
export default {
themeConfig: {
sidebar: [
{
text: '指南',
items: [
// 这里会展示 `/guide/index.md` 页面.
{ text: '介绍', link: '/指南/' }
]
}
]
}
}多级侧边栏的实现方法
侧边栏项目可以进一步嵌套,最多可达 6 层(从根级开始)。请注意,超过 6 层的嵌套项目将被忽略,并且不会显示在侧边栏上。
export default {
themeConfig: {
sidebar: [
{
text: '一级标题',
items: [
{
text: '二级标题',
items: [
{
text: '三级标题',
items: [
...
]
}
]
}
]
}
]
}
}在特定界面隐藏侧边栏
在对应界面的.md文件开头添加以下内容即可:
---
sidebar: false
--- 本文由 DoubleSpirit121 原创
采用 CC BY-NC-SA 4.0 协议进行许可
TAGS:
VitePress 1.6.3
0 评论