Overview Page#

Effect#

Rspress has a built-in preview page, the effect is as follows:

How to use#

Generating the preview page requires the following two steps:

1. Create a new directory and configure frontmatter#

For example, create the following directories and files

├── docs
│   ├── index.md
│   ├── api
│   │   ├── index.md
│   │   ├── theme
│   │   │  ├── component.mdx
│   │   │  ├── utils.mdx
// ...

We add the following to api/index.md:

---
overview: true
---

2. Configuring _meta.json#

The content structure of the preview page will be automatically generated according to _meta.json and the corresponding h1, h2 titles of the article. For example, the configuration of api/_meta.json is as follows:

[
  {
    "type": "file",
    "name": "index",
    "label": "API Overview"
  },
  {
    "type": "dir",
    "name": "theme",
    "label": "Theme"
  }
]

At the same time, the file api/theme/_meta.json has the following content:

["component", "utils"]

The detailed configuration usage of _meta.json can be referred to Auto Nav/Sidebar.

In the above configuration, the final preview page will generate a group called Theme, which contains the h1, h2 titles of two articles: component.md(x) and utils.md(x). Of course, you can also refer to the config of the Theme group to add more groups.

If you want to control the headers displayed in the overview page, you can configure it through overviewHeaders config in _meta.json, which defaults to [2] and you can also configure FrontMatter with overviewHeaders: [2] in exact file.

If you want to generate a sub-preview page under theme, there are two ways:

1. Create a new file theme.md with the same name in the parent directory of theme and configure the frontmatter of overview: true.

├── docs
│ ├── index.md
│ ├── api
│ │ ├── index.md
│ │ ├── theme.md
│ │ ├── theme
│ │ │ ├── component.mdx
│ │ │ ├── utils.mdx
//...

2. Create a new index.md in the theme directory and configure the frontmatter of overview: true.

├── docs
│ ├── index.md
│ ├── api
│ │ ├── index.md
│ │ ├── theme
│ │ │ ├── index.md
│ │ │ ├── component.mdx
│ │ │ ├── utils.mdx
//...

Then configure theme/_meta.json as follows:

[
  {
    "type": "file",
    "name": "index",
    "label": "Overview"
  }
]