> ## Documentation Index
> Fetch the complete documentation index at: https://omer-914cc1c6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 页面

> 页面是文档的基本构成单元

每个页面都是一个 MDX 文件，它将 Markdown 内容与 React 组件相结合，帮助你创建丰富、交互性强的文档。

<div id="page-metadata">
  ## 页面元数据
</div>

每个页面都以 frontmatter 开始，它是在文件开头由 `---` 包裹的 YAML 元数据。该元数据定义了页面的呈现方式和行为。

使用元数据可控制：

* 页面标题和说明
* 侧边栏标题、图标和标签

<ResponseField name="title" type="string" required>
  出现在导航和浏览器标签页中的页面标题。
</ResponseField>

<ResponseField name="description" type="string">
  对本页内容的简要说明。显示在标题下方，并提升 SEO（搜索引擎优化）效果。
</ResponseField>

<ResponseField name="sidebarTitle" type="string">
  显示在侧边栏导航中的简短标题。
</ResponseField>

<ResponseField name="icon" type="string">
  要显示的图标。

  可选项：

  * [Font Awesome icon](https://fontawesome.com/icons) 名称
  * [Lucide icon](https://lucide.dev/icons) 名称
  * 指向外部托管图标的 URL
  * 项目中图标文件的路径
</ResponseField>

<ResponseField name="iconType" type="string">
  [Font Awesome](https://fontawesome.com/icons) 图标样式。仅在使用 Font Awesome 图标时生效。

  选项：`regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。
</ResponseField>

<ResponseField name="tag" type="string">
  显示在侧边栏中页面标题旁边的标签。
</ResponseField>

```yaml Example YAML frontmatter wrap theme={null}
---
title: "关于 frontmatter"
description: "Frontmatter 是控制页面显示和行为的 metadata"
sidebarTitle: "Frontmatter"
icon: "book"
tag: "NEW"
---
```

<div id="page-mode">
  ## 页面模式
</div>

通过 `mode` 设置控制页面的显示方式。

<div id="default">
  ### 默认
</div>

如果未指定模式，将采用带有侧边导航和目录的标准布局。

```yaml theme={null}
---
title: "默认页面标题"
---
```

<div id="wide">
  ### 宽屏
</div>

宽屏模式会隐藏目录。这对没有任何标题的页面，或当你想利用更多横向空间时很有用。所有主题均支持宽屏模式。

```yaml theme={null}
---
title: "宽页面标题"
mode: "wide"
---
```

<div id="custom">
  ### 自定义
</div>

自定义模式提供极简布局，除顶部导航栏外移除所有元素。它是一块空白画布，可用于创建登录页或任何其他独特布局，适合需要尽量精简导航元素的场景。自定义模式适用于所有主题。

```yaml theme={null}
---
title: "自定义页面标题"
mode: "custom"
---
```

<div id="frame">
  ### Frame
</div>

Frame 模式提供与自定义模式类似的布局，但保留侧边栏导航。该模式在维持默认导航体验的同时，允许使用自定义 HTML 和组件。Frame 模式仅适用于 Aspen 和 Almond 主题。

```yaml theme={null}
---
title: "Frame 页面标题"
mode: "frame"
---
```

<div id="center">
  ### 居中
</div>

居中模式会移除侧边栏和目录，将内容置于页面中央。它适用于需要突出内容的页面，如更新日志等。居中模式适用于 Mint 和 Linden 主题。

```yaml theme={null}
---
title: "居中页面标题"
mode: "center"
---
```

<div id="api-pages">
  ## API 页面
</div>

在 frontmatter 中添加 API 规范（`api` 或 `openapi`）即可创建交互式 API 操作台。

```yaml theme={null}
---
openapi: "GET /endpoint"
---
```

进一步了解如何构建[API 文档](/zh/api-playground/overview)。

<div id="external-links">
  ## 外部链接
</div>

在导航中使用 `url` metadata 直接链接到外部站点。

```yaml theme={null}
---
title: "npm 包"
url: "https://www.npmjs.com/package/mint"
---
```

<div id="search-engine-optimization">
  ## 搜索引擎优化
</div>

大多数 SEO 元标签会自动生成。你也可以手动设置 SEO 元标签，以提升站点的 SEO（搜索引擎优化）、社交分享效果和浏览器兼容性。

<Note>
  含有冒号的元标签必须用引号括起来。
</Note>

```yaml theme={null}
---
"twitter:image": "/images/social-preview.jpg"
---
```

有关完整的 SEO（搜索引擎优化）metadata 选项，请参阅 [SEO](/zh/settings/seo)。

<div id="internal-search-keywords">
  ## 内部搜索关键词
</div>

在 metadata 中提供 `keywords`，可提升特定页面在内置搜索中的可发现性。这些关键词不会作为页面内容显示，也不会出现在搜索结果列表中，但当用户搜索这些词时，该页面会相应地显示为搜索结果。

```yaml theme={null}
---
keywords: ['配置', '设置', '入门指南']
---
```