页面级设置

使用前置事项设置标题、描述、路径、布局和可见性

以 Markdown 格式查看

您可以选择使用前置事项来设置每个页面的标题、完整路径覆盖、元描述、建议编辑页面的 URL 以及 OpenGraph 图片。您还可以使用前置事项来禁用某些页面元素,如目录、页面反馈和页面操作。

对于超出前置事项选项的高级样式和功能自定义,请参见 自定义 CSS 和 JavaScript

前置事项语法

前置事项必须添加到 .md.mdx 文件的顶部,在其余内容之前。使用三个破折号来指示前置事项的开始和结束,如下所示:

前置事项示例
1---
2title: 使用前置事项自定义内容
3subtitle: 设置标题、添加元描述等
4slug: frontmatter
5description: 使用前置事项设置页面标题、副标题、路径、元描述、OpenGraph 图片和建议编辑的 URL。
6keywords: frontmatter, seo, customization, metadata
7og:site_name: Your Company Inc.
8og:title: SEO 元数据标题
9---

特殊字符

前置事项使用 YAML 语法,但值也会作为 MDX 处理。某些字符需要加引号,而其他字符需要反斜杠转义。

字符解决方案示例
: # & * ! %用引号包装title: "OAuth: A guide"
{ } < >\ 转义title: "Using \<Callout\>"
" '使用相反样式或 \title: 'The "best" practices'

标题

title
stringDefaults to docs.yml 中的页面名称

设置页面的 <title> 元素。这出现在浏览器标签、书签和搜索结果中。

页面标题可以通过两种方式设置:

  1. 在页面的前置事项中:
welcome.mdx
1---
2title: 欢迎使用我们的文档
3---
  1. 从 docs.yml 中的页面名称(如果没有设置前置事项标题则使用):
docs.yml
1title: Fern | Documentation # 站点范围标题后缀
2navigation:
3 - page: Welcome # 这成为页面标题
4 path: ./pages/welcome.mdx

最终标题将包含站点范围后缀。例如:

  • 使用前置事项:“欢迎使用我们的文档 - Fern | Documentation”
  • 不使用前置事项:“Welcome - Fern | Documentation”

侧边栏标题

sidebar-title
stringDefaults to docs.yml 中的页面名称

设置在侧边栏导航中显示的标题。这优先于 docs.yml 中定义的侧边栏标题。当您希望在保持描述性页面标题的同时使用较短的导航标签时使用此选项。

侧边栏标题可以通过两种方式设置:

  1. 在页面的前置事项中:
authentication.mdx
1---
2title: 身份验证入门 # 浏览器标签和页面标题
3sidebar-title: 身份验证 # 仅用于侧边栏的简短版本
4---
  1. 从 docs.yml 中的页面名称(如果没有设置前置事项 sidebar-title 则使用):
docs.yml
1navigation:
2 - page: Authentication guide # 如果没有前置事项覆盖则显示在侧边栏中
3 path: ./pages/authentication.mdx

副标题

subtitle
string

在页面上渲染为副标题。如果未设置 description,则 subtitle 也用作元描述标签和 llms.txtllms-full.txt 中。

例如,滚动到您现在正在访问的页面顶部,您将看到副标题”使用前置事项设置标题、描述、路径、布局和可见性”。

最后更新

last-updated
string

在页面页脚显示”最后更新”时间戳。使用此选项向读者显示内容最后修改的时间。该值按原样显示,因此您可以使用任何您喜欢的日期格式。

此字段与您的 sitemap 中的时间戳分开,后者由系统自动管理并仅供搜索引擎使用。

最后更新示例
1---
2title: API 参考
3last-updated: 2025年12月9日
4---

想要在 MDX 文件更改时自动更新 last-updated 字段?请参见 自动更新最后更新日期 设置 GitHub Action 工作流程。

路径

slug
string

覆盖页面的完整 URL 路径,从文档站点的根目录开始。这优先于在 docs.yml 中定义的任何路径。

例如,如果您在前置事项中设置 slug: email,页面将在 /email 可用,无论其在导航结构中的位置如何。

有两种方式设置页面的 URL 路径:

  1. 在 docs.yml 中使用 slug,这相对于页面在导航中的位置:
docs.yml
1navigation:
2 - tab: overview
3 layout:
4 - section: Support
5 contents:
6 - page: Email Us
7 path: ./pages/email-us.mdx
8 slug: email # 结果为 /overview/support/email
  1. 在前置事项中使用 slug,这会覆盖一切并从根目录设置绝对路径:
email-us.mdx
1---
2slug: email # 结果为 /email(忽略导航结构)
3---

关键区别是:

  • docs.yml 中的 slug 相对于页面在导航结构中的位置
  • 前置事项中的 slug 是绝对的,完全忽略导航结构

元描述

description
string

设置页面的 元描述。与页面标题一样,元描述对 SEO 很重要。它影响搜索引擎在搜索结果片段中显示的关于您页面的文本。它还可以影响搜索引擎的索引和排名。有关更多信息,请参见 Google 的元描述指南。描述还用于 llms.txtllms-full.txt

元描述示例
1---
2title: API 身份验证
3description: 了解如何使用 API 密钥、OAuth 2.0 或 JWT 令牌来验证您的 API 请求。包含多种语言的代码示例和安全最佳实践。
4---

编辑此页面

edit-this-page-url
string

提供 GitHub 中源 .md.mdx 文件的绝对链接。Fern 使用它在页面上添加”编辑此页面”链接,您的文档用户可以使用它来建议更正或添加内容。您也可以全局配置这个而不是逐页配置 - 请参见 全局配置

此 URL 适用于两种 启动模式。使用 launch: github 时,它是编辑按钮的主要链接。使用 launch: dashboard 时,它作为备用传递,以便用户也可以从仪表板屏幕导航到 GitHub 上的源。

编辑此页面 URL 示例
1---
2title: API 参考
3edit-this-page-url: https://github.com/your-org/docs/blob/main/content/api-reference.mdx
4---
编辑此页面功能

元图片

image
string

使用指向在线托管图片的绝对 URL 为页面配置 OpenGraph 图片元数据。当您的文档链接在社交媒体平台上分享时,此图片会出现,使用 OpenGraph 元数据协议。有关更多信息,请参见 web.dev 的 OpenGraph 说明

目录

隐藏目录

hide-toc
boolean

控制页面右侧目录功能的条件渲染。设置为 true 以禁用此功能。

隐藏目录示例
1---
2title: 首页
3hide-toc: true
4---
目录功能

当目录被隐藏时,Fern 默认会将页面内容居中。要控制页面的布局,请参见 布局文档

最大深度

max-toc-depth
number

设置目录的最大深度。例如,值为 3 将只在目录中显示 <h1><h2><h3> 标题。

目录最大深度示例
1---
2title: 示例页面
3max-toc-depth: 3
4---
目录最大深度

导航链接

hide-nav-links
boolean

控制页面底部导航链接(上一页、下一页)的条件渲染。设置为 true 以禁用此功能。

这可以在 全局配置 中全局设置。

隐藏导航链接示例
1---
2title: 独立指南
3hide-nav-links: true
4---
导航链接功能

页面反馈

hide-feedback
boolean

控制页面底部页面反馈表单的条件渲染。设置为 true 以禁用此功能。

这可以在 全局配置 中全局设置。

隐藏反馈示例
1---
2title: API 状态页面
3hide-feedback: true
4---
留下反馈功能

页面操作

hide-page-actions
boolean

控制页面操作按钮(复制页面、查看为 Markdown、Ask AI、ChatGPT、Claude、Claude Code、Cursor)的条件渲染。设置为 true 以关闭单个页面的页面操作。

或者,在您的 docs.yml 文件中为 整个站点配置页面操作

docs/getting-started/overview.mdx
1---
2title: 概述
3hide-page-actions: true
4---

页面标志

logo
object

覆盖页面的站点范围标志。使用绝对 URL 为浅色和深色模式指定不同的标志。

index.mdx 标志示例
1---
2logo:
3 light: https://link-to-image.com/image-light-mode.png
4 dark: https://link-to-image.com/image-dark-mode.png
5---

目前,此字段不支持相对路径。

布局

layout
stringDefaults to guide

设置页面布局。可用选项:

  • guide:默认文档布局,右侧有目录。适用于教程、操作指南和任何受益于通过章节轻松导航的内容。

  • overview:更宽的布局(比 guide 宽50%),带有目录和导航侧边栏。非常适合需要更多水平空间同时保持导航的首页和章节概述。

  • reference:为 API 或 SDK 参考优化的全宽布局。始终隐藏目录,因此您可以添加另一列,如代码示例。导航侧边栏保持可见。

  • page:无干扰的全屏布局,隐藏目录和导航侧边栏。最适合受益于专注阅读体验的独立内容。

  • custom:空白画布布局,移除所有默认样式约束。隐藏目录和导航侧边栏,允许完全控制页面布局。

SEO 元数据

希望在整个站点设置元数据?

docs.yml 文件中使用元数据字段

只有记录的 SEO 字段会作为元标签添加到 HTML <head> 中。自定义前置事项字段不会自动出现在您的页面元数据中。要添加自定义元数据,请使用 自定义 JavaScript

plantstore-quickstart.mdx
1---
2title: PlantStore API 快速开始
3headline: "PlantStore API 入门 | 开发者文档"
4keywords: plants, garden, nursery
5canonical-url: https://docs.plantstore.dev/welcome
6og:site_name: PlantStore 开发者文档
7og:title: "PlantStore API 快速开始指南"
8og:description: "了解如何集成 PlantStore 的 API 来管理植物库存、处理订单和跟踪运输。包含完整的代码示例。"
9og:image: https://plantstore.dev/images/api-docs-banner.png
10og:image:width: 1200
11og:image:height: 630
12twitter:card: summary_large_image
13twitter:site: "@PlantStoreAPI"
14noindex: false
15nofollow: false
16---
headline
string

当设置时,文档头部的 <title /> 标签将使用此值而不是 title 属性。此属性更改搜索引擎在抓取此页面时看到的标题,可用于解决 SEO 报告中的重复标题问题。

canonical-url
string

覆盖此页面的规范 URL。必须是包含协议的完整 URL(即 https://buildwithfern.com/learn/docs/content/frontmatter

keywords
string

与页面内容相关的关键词逗号分隔字符串(即 plants, garden, nursery)。这些关键词帮助搜索引擎理解页面主题并有助于搜索排名。使用用户在寻找页面内容时可能搜索的特定相关术语。

此字段只接受逗号分隔的字符串,而不是括号数组。

og:site_name
string

您的网站在内容分享时应出现的名称。

og:title
string

您的页面在内容分享时应出现的标题。

og:description
string

您的页面在内容分享时应出现的描述。

og:url
string

您页面的 URL。

og:image
string

内容分享时将显示的图片的 URL 或标识符。

og:image:width
number

图片的宽度(像素)。

og:image:height
number

图片的高度(像素)。

og:locale
string

页面的语言环境,通常采用 language_TERRITORY 格式(例如,en_US)。

og:logo
string

内容分享时将显示的您网站标志图片的 URL 或标识符。

twitter:title
string

您的页面在推文中应出现的标题。

twitter:description
string

您的页面在推文中应出现的描述。

twitter:handle
string

页面创建者或站点的 Twitter 用户名。

twitter:image
string

推文中将显示的图片的 URL 或标识符。

twitter:site
string

您的网站在推文中应出现的名称。

twitter:url
string

您页面的 URL。

twitter:card
string

在 Twitter 上分享使用的卡片类型。选项:summarysummary_large_imageappplayer

noindex
boolean

如果设置为 true,页面将不会被搜索引擎索引,并将从 llms.txt 端点中排除。

nofollow
boolean

如果设置为 true,搜索引擎将不会跟随页面上存在的任何链接。

可用性

availability
string

在页面上显示可用性标识。当在前置事项中设置时,它覆盖在 导航中定义的任何可用性docs.yml)。有效值为:stablegenerally-availablein-developmentpre-releasedeprecatedbeta

fern/docs/pages/getting-started/feature.mdx
1---
2title: 新功能
3availability: beta
4---

当您想要为单个页面设置可用性而不修改 docs.yml 导航配置,或当您需要覆盖从父级部分或文件夹继承的可用性时,这很有用。

更新日志标签

tags
array of strings

仅用于 更新日志页面。标签允许用户按特定类别过滤更新日志条目。在前置事项中将标签定义为字符串数组。

fern/openapi/changelog/2024-07-31.mdx
1---
2tags: ["plants-api", "breaking-change", "inventory-management"]
3---
4
5## Summary
6
7In the latest release, we've added endpoints to create a new Plant.
8
9### What's new?
10
11New endpoints:
12
13- `POST /plant` add a new plant to inventory.
14
15New object schemas:
16
17- `CreatePlantRequest`
18
19<Note> Have questions? Reach out to your local botanist. </Note>