Skip to content

文中目录配置

在 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]
---

# 你的文章内容

注意事项

  1. 标题层级要求:确保文档中至少包含 ## h2### h3 标题,否则目录不会显示对应层级。
  2. 默认行为:Vitepress 默认显示到 h2level: [2]),修改为 [2, 3] 即可包含 h3
  3. 动态目录:滚动页面时,目录会自动高亮当前阅读位置。

示例 Markdown 结构:

markdown
# 一级标题(h1,不会出现在目录)

## 二级标题(h2)

### 三级标题(h3)

#### 四级标题(h4,不会显示)

配置后,目录将包含 h2h3 标题,忽略 h1h4+