#Overview 页

Overview 页用于展示某个目录下所有文章的概览，会自动从侧边栏提取信息并生成分组内容。

#用法

在目录的 index.md 中配置 overview: true 即可开启：

---
overview: true
title: API Overview
---

这是 API 的概览页面。

Overview 页会自动读取当前目录的侧边栏配置，提取各文章的标题生成分组卡片。

#示例

假设有如下目录结构和 _meta.json 配置：

---
overview: true
title: API Overview
---

这是 API 的概览页面。

[
  { "type": "file", "name": "index", "label": "API Overview" },
  { "type": "dir", "name": "config", "label": "Config" },
  { "type": "dir", "name": "runtime", "label": "Runtime" }
]

生成的 Overview 页面如下：

#配置

#overviewHeaders

控制在 Overview 页中展示的标题级别，默认为 [2]（即只展示 h2 标题）。

可以在 _meta.json 中配置：

[
  {
    "type": "file",
    "name": "component",
    "overviewHeaders": [2, 3]
  }
]

也可以在文章的 frontmatter 中配置：

---
overviewHeaders: [2, 3]
---

#嵌套 Overview 页

子目录同样可以有自己的 Overview 页，只需在子目录的 index.md 中配置 overview: true：

#自定义

如果需要完全自定义 Overview 页的内容，有以下两种方案：

#方案一：通过自定义主题修改样式

通过自定义主题来修改 OverviewGroup 组件的样式，同时继续使用 Overview 页的内置功能：

---
overview: true
---

#方案二：完全自定义页面内容

使用 OverviewGroup 组件并通过 pageType: doc-wide 调整页面布局，自行定义页面内容：

---
pageType: doc-wide
---

# My custom overview page

import { OverviewGroup } from '@rspress/core/theme';

<OverviewGroup
  group={{
    name: 'Custom Group',
    items: [
      {
        text: 'Page Title',
        link: '/path/to/page',
        headers: [
          { id: 'section-1', text: 'Section 1', depth: 2 },
          { id: 'section-2', text: 'Section 2', depth: 2 },
        ],
      },
    ],
  }}
/>