跳转到主要内容
每个页面都是一个 MDX 文件,将 Markdown 内容与 React 组件结合,帮助你创建丰富、交互的文档。

页面元数据

每个页面都以 frontmatter 开始,即文件开头由 --- 包裹的 YAML 元数据。该元数据定义页面的呈现方式与行为。 使用元数据可控制:
  • 页面标题和描述
  • 侧边栏标题、图标和标签
title
string
required
出现在导航和浏览器标签页中的页面标题。
description
string
对本页面内容的简要说明。显示在标题下方,并提升 SEO 表现。
sidebarTitle
string
显示在侧边栏导航中的简短标题。
icon
string
要显示的图标。选项:
iconType
string
Font Awesome 的图标样式。仅在使用 Font Awesome 图标时生效。选项:regularsolidlightthinsharp-solidduotonebrands
tag
string
显示在侧边栏中页面标题旁的标签。
YAML 前置数据示例封装
---
title: "关于 Frontmatter"
description: "Frontmatter 是用于控制页面显示与行为的元数据"
sidebarTitle: "Frontmatter"
icon: "book"
tag: "全新"
---

页面模式

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

默认

如果未指定模式,将使用带有侧边导航和目录的标准布局。
---
title: "默认页面标题"
---

宽屏

宽屏模式会隐藏目录。适用于没有标题的页面,或当你想利用更多横向空间时使用。所有主题均支持宽屏模式。
---
title: "宽屏页面标题"
mode: "wide"
---

自定义

自定义模式提供极简布局,除顶部导航栏外移除所有元素。自定义模式是一块空白画布,可用于创建登录页或任何其他希望尽量减少导航元素的独特布局。自定义模式适用于所有主题。
---
title: "自定义页面标题"
mode: "custom"
---

Frame

Frame 模式提供与自定义模式相似的布局,但保留侧边栏导航。此页面模式在维持默认导航体验的同时,允许使用自定义 HTML 和组件。Frame 模式仅适用于 Aspen 和 Almond 主题。
---
title: "框架页标题"
mode: "frame"
---

居中

“居中”模式会移除侧边栏和目录,将内容居中展示。对于变更日志或其他需要强调正文的页面,这非常实用。Mint 和 Linden 主题均支持该模式。
---
title: "页面标题居中"
mode: "center"
---

API 页面

在 frontmatter 中添加 API 规范(apiopenapi)即可创建交互式 API交互测试台。
---
openapi: "GET /endpoint"
---
了解更多有关构建API 文档的内容。 在导航中使用 url 元数据,直接链接到外部站点。
---
title: "npm 包"
url: "https://www.npmjs.com/package/mint"
---

搜索引擎优化

大多数 SEO 元标签会自动生成。你也可以手动设置 SEO 元标签,以改进站点的 SEO、社交分享效果和浏览器兼容性。
带有冒号的元标签必须用引号括起来。
---
"twitter:image": "/images/social-preview.jpg"
---
完整的 SEO 元数据选项请参见 SEO

内部搜索关键词

在元数据中添加 keywords,可提升特定页面在内置搜索中的可发现性。这些关键词不会显示在页面内容或搜索结果中,但当用户搜索这些关键词时,该页面仍会作为结果呈现。
---
keywords: ['配置', '安装与设置', '快速上手']
---