文中目录配置
在 Vitepress 中配置文章目录显示到三级目录,可以通过以下两种方式实现。
方法一:全局配置
修改 .vitepress/config.js
,在主题配置中设置 outline
属性,将 level
设为 [2, 3]
:
javascript
// .vitepress/config.js
export default {
themeConfig: {
outline: {
level: [2, 3], // 显示 h2 和 h3 标题
label: '目录' // 可选:自定义目录标题
}
}
}
方法二:页面级配置
在 Markdown 文件的 Frontmatter 中覆盖全局配置:
markdown
---
outline: [2, 3]
---
# 你的文章内容
注意事项
- 标题层级要求:确保文档中至少包含
## h2
和### h3
标题,否则目录不会显示对应层级。 - 默认行为:Vitepress 默认显示到
h2
(level: [2]
),修改为[2, 3]
即可包含h3
。 - 动态目录:滚动页面时,目录会自动高亮当前阅读位置。
示例 Markdown 结构:
markdown
# 一级标题(h1,不会出现在目录)
## 二级标题(h2)
### 三级标题(h3)
#### 四级标题(h4,不会显示)
配置后,目录将包含 h2
和 h3
标题,忽略 h1
和 h4+
。