网站级别设置

docs.yml 中自定义颜色、字体、徽标、布局、导航栏链接和分析

以 Markdown 格式查看

docs.yml 文件是您在文档网站中自定义颜色、字体、布局、分析等的主要工具。对于大多数自定义需求,请从这里开始,然后再考虑自定义 CSS 和 JavaScript 来满足高级使用场景。

YAML 架构验证

要在编辑器中启用智能 YAML 验证和自动完成功能,请在您的 docs.yml 文件顶部添加这一行:

docs.yml
1# yaml-language-server: $schema=https://schema.buildwithfern.dev/docs-yml.json

这将启用基于 Fern 的完整架构的实时架构验证和自动完成功能。

核心配置

每个 Fern 文档网站都需要一个 docs.yml 文件,其中包含核心配置设置。以下是您可以配置的基本顶级属性:

docs.yml
1# yaml-language-server: $schema=https://schema.buildwithfern.dev/docs-yml.json
2
3title: Stripe API Documentation
4favicon: assets/stripe-favicon.ico
5default-language: typescript # 默认代码示例语言
6
7logo:
8 href: https://stripe.com
9 dark: assets/stripe-logo-dark.svg
10 light: assets/stripe-logo-light.svg
11
12colors:
13 accent-primary:
14 light: "#635BFF" # Stripe 主紫色
15 dark: "#9B90FF" # 深色模式的浅紫色
16 background:
17 light: "#FFFFFF"
18 dark: "#0A2540"
19
20navbar-links:
21 - type: filled
22 text: "仪表板"
23 href: "https://dashboard.stripe.com"
24 - type: minimal
25 text: "支持"
26 href: "https://support.stripe.com"
title
string

用作选项卡标题的字符串。

object

为您的网站设置自定义徽标。了解更多关于logo 配置的信息。

favicon
string

网站图标的相对文件路径。路径相对于设置它的 YAML 文件(例如 docs.yml)。

colors
objectsRequired

配置 primaryAccentbackground 颜色。了解更多关于colors 配置的信息。

redirects
list of objects

您想要配置为永久重定向到另一个路径的路径数组。了解更多关于redirects 配置的信息。

list of objects

您想要包含作为号召性用语的链接的名称和 URL 数组。了解更多关于navbar-links 配置的信息。

background-image
object

设置在每个页面后显示的自定义背景图像。了解更多关于background-image 配置的信息。

typography
object

自定义文档网站中使用的字体。了解更多关于typography 配置的信息。

layout
object

自定义文档网站的布局。了解更多关于layout 配置的信息。

settings
object

自定义文档网站的设置。了解更多关于settings 配置的信息。

landing-page
object

为您的文档网站创建着陆页。了解更多关于landing-page 配置的信息。

default-language
string

设置 API 参考中代码片段显示的默认语言。

选项包括:typescriptpythonjavagorubycsharpphpswiftcurl

metadata
object

配置文档网站的 SEO 元数据。了解更多关于metadata 配置的信息。

global-theme
string

应用于此网站的全局主题的名称。CLI 在发布时从 Fern 的注册表获取命名主题,并将其品牌字段(徽标、颜色、字体、布局、CSS、JS 等)合并到本地 docs.yml 中。使用此功能在多个文档网站间共享一致的视觉标识。

string

自定义 React 组件文件(TSX 或 JSX)的路径,用于替换 Fern 的默认页头。组件必须有默认导出。了解更多关于自定义页头和页脚组件的信息。

string

自定义 React 组件文件(TSX 或 JSX)的路径,用于替换 Fern 的默认页脚。组件必须有默认导出。了解更多关于自定义页头和页脚组件的信息。

实例配置

instance(实例)是独特文档网站的后端。每个实例使用 --instance 标志发布到唯一域名。最常见的是使用实例来配置发布到不同 URL 的预发布和生产环境文档。

docs.yml
1instances:
2 - url: plantstore.docs.buildwithfern.com
3 custom-domain: docs.plantstore.com
4 audiences:
5 - public
instances
list of objects

配置一个或多个文档网站。

instances.url
stringRequired

部署 Fern 文档的 URL。必须包含后缀 docs.buildwithfern.com

instances.custom-domain
string or list of strings

托管文档的自定义域名。了解更多关于设置自定义域名的信息。

instances.edit-this-page
object

如果指定,会在每个页面底部添加”编辑此页面”链接,该链接指向给定的公共 GitHub 仓库。您可以选择设置 launch 目标来控制链接的跳转位置。了解更多关于edit-this-page 配置的信息。

instances.audiences
list of strings

指定此实例服务的受众(例如,内部开发者、测试用户、公共客户)。

您可以使用受众来控制每个文档实例中显示哪些版本和产品,从而为不同用户群体创建单独的网站。当内容的受众标签与实例受众匹配时,内容会被包含。没有受众标签的内容默认包含。了解更多关于为产品和/或版本配置实例受众的信息。

instances.multi-source
boolean

当为 true 时,CLI 使用基础路径感知发布,以便多个独立仓库可以使用不同基础路径发布到同一自定义域名。启用此功能时,urlcustom-domain 必须共享相同的基础路径。了解更多关于多源文档的信息。

颜色配置

配置文档在浅色和深色模式下的调色板。只有 accent-primary 是必需的——所有其他颜色都有合理的默认值。这些颜色在您的自定义样式表中也会自动作为 CSS 自定义属性可用。

docs.yml
1colors:
2 accent-primary:
3 light: "#418326" # 浅色模式的主要品牌色
4 dark: "#ADFF8C" # 深色模式的主要品牌色
5
6 background:
7 light: "#ffffff"
8 dark: "#0d0e11"
9
10 border:
11 light: "#e5e7eb"
12 dark: "#1f2937"
13
14 sidebar-background:
15 light: "#f9fafb"
16 dark: "#111827"
17
18 header-background:
19 light: "#ffffff"
20 dark: "#0d0e11"
21
22 card-background:
23 light: "#f3f4f6"
24 dark: "#1f2937"
accent-primary
objectRequired

用于链接、按钮和高亮文本等交互元素的主要品牌色。 为浅色和深色模式配置不同的颜色以确保适当的对比度和可见性。

background
object

所有文档页面的主要背景色。选择与文本形成良好对比 并与您的品牌色互补的颜色。深色模式颜色应减少眼部疲劳。

border
object

用于分割线、元素边框和视觉分隔符。选择能创造 清晰边界但不太突出的微妙颜色。

object

导航侧边栏的背景色。指定时,右侧包含 1px 边框。 如果省略,侧边栏使用透明背景且无边框。

header-background
object

顶部导航页头的背景色。指定时,底部包含 1px 实线边框。 如果省略,页头使用透明背景和微妙的渐变边框。

card-background
object

卡片、代码块和其他容器元素的背景色。应该与主要背景 稍有不同,以创建视觉层次同时保持可读性。

徽标配置

配置网站徽标,支持浅色和深色模式的不同图像、可点击链接和可选显示文本。

docs.yml
1logo:
2 href: https://example.com
3 dark: assets/images/logo-dark.svg
4 light: assets/images/logo-light.svg
5 right-text: Docs
6 height: 28
logo.href
string

用户点击徽标时会跳转到的 URL。通常是您公司的主页或应用程序。

logo.dark
string

深色模式徽标文件的路径,相对于设置它的 YAML 文件(例如 docs.yml)。建议使用 SVG 格式以获得最佳质量。示例:assets/images/logo-dark.svg

logo.light
string

浅色模式徽标文件的路径,相对于设置它的 YAML 文件(例如 docs.yml)。建议使用 SVG 格式以获得最佳质量。示例:assets/images/logo-light.svg

logo.right-text
string

在徽标图像右侧显示的文本。这对于在徽标旁边添加”Docs”或”API”等标签很有用。

logo.height
number

徽标的自定义高度(像素)。如果默认高度不适合您的设计,请使用此选项调整徽标大小。

重定向配置

在路径之间重定向流量,可以是精确路径或正则表达式模式。配置重定向指南详细介绍了示例和顺序规则。

docs.yml
1redirects:
2 - source: /old-path
3 destination: /new-path
4 - source: /old-folder/:slug*
5 destination: /new-folder/:slug*
source
stringRequired

您要重定向的相对路径(例如,/old-path)。必须是相对路径,而不是绝对 URL。不能包含搜索参数(例如,?key=value)。匹配前会对末尾斜杠进行归一化,因此 /old-path//old-path 等价。请与所重定向 URL 的大小写保持一致。

destination
stringRequired

您要路由到的路径。可以是内部路径(/new-path)或外部 URL(https://example.com)。外部 URL 必须包含完整地址,包括 https

permanent
booleanDefaults to true

默认使用 308 状态码指示客户端和搜索引擎永久缓存重定向。只有在需要使用 307 状态码的临时重定向时才设置为 false,这不会被缓存。

导航栏链接配置

向文档网站的顶部导航栏添加导航链接和按钮。

docs.yml
1navbar-links:
2 - type: minimal
3 text: 联系支持
4 href: https://example.com/support
5 target: _blank
6 icon: fa-solid fa-headset
7 - type: filled
8 text: 登录
9 href: https://example.com/login
10 rounded: false
11 icon: ./assets/icons/login-icon.svg
12 - type: github
13 value: https://github.com/example-company/fern
14 - type: dropdown
15 text: 资源
16 icon: fa-solid fa-book
17 links:
18 - text: 文档
19 href: https://example.com/docs
20 icon: fa-regular fa-file-lines
21 - text: API 参考
22 href: https://example.com/api
23 target: _blank
24 icon: fa-regular fa-code
25 - text: 教程
26 href: https://example.com/tutorials
27 icon: fa-regular fa-graduation-cap
type
enum

outlinedminimalfilledgithubdropdown 中的一个。此值控制按钮的样式。

href
string

点击按钮后的 URL。示例:https://buildwithfern.com/book-demo

value
string

GitHub 仓库的 URL。类似于 href,但专门用于 GitHub 仓库链接。当 type 设置为 github 时使用此字段。示例:https://github.com/example-company/fern

text
string

按钮内的文本。

rounded
booleanDefaults to false

当为 true 时,按钮的边框半径将完全圆角。

icon
string

按钮中使用的图标。此图标将出现在文本内容的左侧

Icons can be in three formats:

  • Font Awesome icons: Use icon names like fa-solid fa-rocket. Pro and Brand Icons from Font Awesome are supported.
  • Custom image files: Use relative paths to image files (e.g., ./assets/icons/my-icon.svg or ../assets/icons/my-icon.png). Paths are relative to the YAML file where the icon is referenced (e.g., docs.yml). For example, if you set an icon in fern/products/my-product.yml, the path ./assets/icon.svg resolves to fern/products/assets/icon.svg. If you set it in fern/docs.yml, the same path resolves to fern/assets/icon.svg.
  • Inline SVG: Provide an SVG string wrapped in quotes (e.g., "<svg>...</svg>").
rightIcon
string

按钮中使用的图标。此图标将出现在文本内容的右侧

Icons can be in three formats:

  • Font Awesome icons: Use icon names like fa-solid fa-rocket. Pro and Brand Icons from Font Awesome are supported.
  • Custom image files: Use relative paths to image files (e.g., ./assets/icons/my-icon.svg or ../assets/icons/my-icon.png). Paths are relative to the YAML file where the icon is referenced (e.g., docs.yml). For example, if you set an icon in fern/products/my-product.yml, the path ./assets/icon.svg resolves to fern/products/assets/icon.svg. If you set it in fern/docs.yml, the same path resolves to fern/assets/icon.svg.
  • Inline SVG: Provide an SVG string wrapped in quotes (e.g., "<svg>...</svg>").

默认情况下,filled 按钮的 rightIcon 设置为 arrow-right

target
stringDefaults to _self

指定在何处打开链接的 URL。对于典型的文档网站,链接可以在同一标签页(_self)或新标签页(_blank)中打开。对于嵌入在仪表板或 iframe 中的文档,链接可以在父框架(_parent)或最顶层框架(_top)中打开。

list of objects

type 设置为 dropdown 时在下拉菜单中显示的项目。

links.text
string

为链接显示的文本。

links.href
string

链接指向的 URL。

links.icon
string

在文本左侧显示的 Font Awesome 图标

links.rightIcon
string

在文本右侧显示的 Font Awesome 图标

links.rounded
booleanDefaults to false

当为 true 时,链接将具有完全圆角边框。

links.target
stringDefaults to _self

指定在何处打开链接的 URL。

页脚链接配置

向文档网站页脚添加可点击的社交媒体和社区链接,以提高可发现性和参与度。

页脚链接提供到您社交渠道的视觉导航。要在页面或网站级别配置 SEO 元数据和社交媒体标签,请参阅元数据配置

docs.yml
1footer-links:
2 github: https://github.com/your-org/your-repo
3 slack: https://your-community.slack.com
4 x: https://x.com/yourhandle
5 twitter: https://twitter.com/yourhandle
6 linkedin: https://www.linkedin.com/company/your-company
7 youtube: https://www.youtube.com/@yourchannel
8 instagram: https://www.instagram.com/yourhandle
9 facebook: https://www.facebook.com/yourpage
10 discord: https://discord.gg/yourinvite
11 hackernews: https://news.ycombinator.com/user?id=yourusername
12 medium: https://medium.com/@yourhandle
13 website: https://yourwebsite.com
string

您的 GitHub 仓库或组织的 URL。

string

您的 Slack 社区或工作空间的 URL。

string

您的 X(原 Twitter)档案的 URL。

string

您的 Twitter 档案的 URL。使用 footer-links.x 获得新的 X 品牌。

string

您的 LinkedIn 公司页面或档案的 URL。

string

您的 YouTube 频道的 URL。

string

您的 Instagram 档案的 URL。

string

您的 Facebook 页面的 URL。

string

您的 Discord 服务器邀请的 URL。

string

您的 Hacker News 档案的 URL。

string

您的 Medium 出版物或档案的 URL。

string

您的主网站或主页的 URL。

背景图像配置

设置自定义背景图像,在文档网站的每个页面后显示。

docs.yml
1background-image:
2 light: ./path/to/bg-light.svg
3 dark: ./path/to/bg-dark.svg
background-image.light
string

浅色模式背景图像的相对文件路径。路径相对于设置它的 YAML 文件(例如 docs.yml)。

background-image.dark
string

深色模式背景图像的相对文件路径。路径相对于设置它的 YAML 文件(例如 docs.yml)。

字体配置

自定义文档网站中用于正文、标题和代码块的字体。

docs.yml
1typography:
2 # 标题和题目的字体
3 headingsFont:
4 name: Inter-Bold
5 paths:
6 - path: ./fonts/Inter-Bold.woff2
7 weight: 700
8 style: normal
9
10 # 正文的字体
11 bodyFont:
12 name: Inter-Regular
13 path: fonts/Inter-Regular.woff2
14 style: normal
15
16 # 代码片段的字体
17 codeFont:
18 name: JetBrains-Mono
19 path: ./fonts/JetBrains-Mono-Regular.woff2
typography.bodyFont
object

用于所有正文的字体,包括段落、列表和一般内容。 为了获得最佳性能,请使用 WOFF2 格式。

typography.headingsFont
object

用于标题、题目和其他突出文本元素的字体。如果您喜欢统一的外观, 可以与正文字体相同。支持不同标题级别的多种字重。

typography.codeFont
object

用于代码块和内联代码的字体。建议使用等宽字体以获得更好的代码可读性。 热门选择包括 JetBrains Mono、Fira Code 和 Source Code Pro。

字体配置

1typography:
2 bodyFont:
3 name: Inter-Regular
4 path: fonts/Inter-Regular.woff2
5 style: normal
name
string

字体的名称。默认为生成的名称,该名称将用于在最终注入的 CSS 中引用您的自定义字体。

path
string

字体文件的路径,相对于设置它的 YAML 文件(例如 docs.yml)。当您只有一个字体文件时使用此选项。对于多个字体文件(如粗体、斜体等的单独文件),请使用 paths

weight
string | number

字体的字重。可以是数字(400、700)或可变字体的范围(400 700)。 常见值:400(正常)、700(粗体)。

style
string

字体样式,可以是”normal”或”italic”。如果未指定,默认为”normal”。

paths
object

特定字重的字体文件列表。列表中的每个元素包含 pathweightstyle 属性。

布局配置

控制页头、侧边栏、内容区域和搜索栏等结构元素的尺寸和位置。

docs.yml
1layout:
2 header-height: 70px
3 page-width: 1344px
4 content-width: 672px
5 sidebar-width: 336px
6 searchbar-placement: header
7 tabs-placement: header
8 switcher-placement: sidebar
9 content-alignment: left
10 hide-nav-links: true
11 hide-feedback: true
layout.header-height
string

设置页头的高度。默认为 4rem64px)。有效选项为 {number}rem{number}px

layout.page-width
string

设置文档布局的最大宽度,包括侧边栏和内容。默认为 88rem1408px)。 有效选项为 {number}rem{number}pxfull

layout.content-width
string

设置 Markdown 文章内容的最大宽度。默认为 44rem704px)。 有效选项为 {number}rem{number}px

layout.sidebar-width
string

设置桌面模式下侧边栏的宽度。默认为 18rem288px)。有效选项为 {number}rem{number}px

layout.searchbar-placement
stringDefaults to sidebar

设置搜索栏的位置。可以是 headersidebarheader-tabs(将搜索栏放在页头但在选项卡行)之一。

disable-header 设置为 true 时,此设置将被忽略。
layout.tabs-placement
stringDefaults to sidebar

设置选项卡的位置。可以是 headersidebar 之一。

disable-header 设置为 true 时,此设置将被忽略。
layout.switcher-placement
stringDefaults to header

设置产品和版本切换器的位置。可以是 headersidebar 之一。

disable-header 设置为 true 时,此设置将被忽略。
layout.content-alignment
string

设置 Markdown 内容的对齐方式。可以是 centerleft 之一。 默认为 center

layout.disable-header
booleanDefaults to false

如果设置为 true,页头将不会呈现。相反,徽标将作为侧边栏的一部分呈现, 1px 边框将分隔侧边栏和内容。

booleanDefaults to false

如果设置为 true,页面底部的导航链接(上一页、下一页)将不会呈现。这可以通过页面 frontmatter在单个页面基础上覆盖。

layout.hide-feedback
booleanDefaults to false

如果设置为 true,反馈表单将不会呈现。这可以通过页面 frontmatter在单个页面基础上覆盖。

layout.mobile-toc
booleanDefaults to false

如果设置为 true,在移动设备和平板电脑视口(在 xl 断点以下)的页头下方显示粘性目录栏。该栏显示滚动进度指示器和当前标题,点击时展开为完整目录。

仅适用于使用guideoverview 布局的页面。当页面的标题少于两个或在页面 frontmatter 中设置了 hide-toc: true 时,该栏会隐藏。

主题配置

自定义文档网站中特定 UI 元素的视觉样式。

docs.yml
1theme:
2 sidebar: minimal
3 body: canvas
4 tabs:
5 style: bubble
6 alignment: center
7 placement: header
8 page-actions: toolbar
9 footer-nav: minimal
10 product-switcher: toggle
theme.sidebar
stringDefaults to default

设置导航侧边栏的视觉样式。default 显示带有节标题和图标的完整侧边栏;minimal 显示没有装饰元素的更简洁、简化的侧边栏。

theme.body
stringDefaults to default

设置主要内容正文的视觉样式。default 使用平面背景;canvas 在内容区域周围添加微妙的卡片式容器。

theme.tabs
string | objectDefaults to default

配置导航选项卡。接受字符串(defaultbubble)进行仅样式配置,或带有 stylealignmentplacement 属性的对象进行完全控制。

当设置为字符串时,default 使用下划线选项卡,bubble 显示带有圆角药丸形背景的选项卡。

theme.tabs.style
stringDefaults to default

设置导航选项卡的视觉样式。default 使用下划线选项卡;bubble 显示带有圆角药丸形背景的选项卡。

theme.tabs.alignment
stringDefaults to left

placementheader 时设置选项卡的水平对齐方式。left 将选项卡左对齐;center 将其水平居中。当 placementsidebar 时,对齐方式无效。

theme.tabs.placement
stringDefaults to sidebar

设置选项卡的位置。header 在顶部导航页头中显示选项卡;sidebar 在左侧侧边栏中显示它们。

当两者都设置时,优先于 layout.tabs-placement。当 layout.disable-header 设置为 true 时,此设置被忽略。

theme.page-actions
stringDefaults to default

设置页面操作按钮的视觉样式。default 显示单独的图标按钮;toolbar 将操作分组为紧凑的水平工具栏。

theme.footer-nav
stringDefaults to default

设置页脚导航链接的视觉样式。default 显示带有标题和描述的完整上一页/下一页卡片;minimal 显示简单的文本链接。

theme.product-switcher
stringDefaults to default

设置产品切换器的视觉样式。default 显示下拉选择器;toggle 显示水平切换栏。

设置配置

配置网站范围的行为,如搜索、代码显示、404 处理和环境变量替换。

docs.yml
1settings:
2 search-text: "搜索文档..."
3 disable-search: false
4 disable-explorer-proxy: false
5 disable-analytics: true
6 dark-mode-code: true
7 default-search-filters: true
8 http-snippets: false
9 hide-404-page: true
10 use-javascript-as-typescript: false
11 folder-title-source: frontmatter
12 substitute-env-vars: true
settings.search-text
stringDefaults to Search

在搜索栏中显示的文本。

booleanDefaults to false

如果设置为 true,搜索栏将被禁用。如果您想使用自定义搜索解决方案,请使用此选项。

settings.disable-explorer-proxy
booleanDefaults to false

如果设置为 true,API Explorer 在直接向您的 API 发送请求时将绕过代理。

启用此功能时,您的 API 必须启用跨域资源共享 (CORS) 以允许来自文档域名的请求。

settings.dark-mode-code
booleanDefaults to false

如果设置为 true,代码块将以深色模式显示,无论选择的主题如何。

settings.default-search-filters
booleanDefaults to false

控制搜索结果是否默认限定在用户当前的产品和版本范围内。

当设置为 false(默认值)时,搜索返回所有产品和版本的结果。当设置为 true 时,搜索 UI 会自动筛选结果以匹配用户当前浏览的产品和版本。用户可以从搜索 UI 中删除这些过滤器以扩大搜索范围。

settings.http-snippets
boolean | list of objectsDefaults to true

控制 API 参考中 HTTP 片段的显示。默认情况下为所有语言启用 HTTP 片段。

  • 设置为 false 以完全禁用 HTTP 片段
  • 提供语言列表以仅为特定语言启用片段
docs.yml
1# 仅为 Python 和 Ruby 启用
2settings:
3 http-snippets:
4 - python
5 - ruby
settings.hide-404-page
booleanDefaults to false

如果设置为 true,当用户导航到不存在的页面时,他们将被重定向到主页。

默认情况下,将显示 404 页面。

settings.use-javascript-as-typescript
booleanDefaults to false

如果设置为 true,TypeScript 片段将在 API 参考中显示为 JavaScript 片段。

settings.disable-analytics
booleanDefaults to false

如果设置为 true,在analytics 配置中配置的所有分析集成将被禁用。这包括 Google Analytics 4、Google Tag Manager、PostHog 和您配置的任何其他分析提供商。

settings.folder-title-source
'filename' | 'frontmatter'Defaults to filename

设置在所有文件夹导航中导出页面和节标题的默认方法。默认情况下(filename),标题从文件名导出。设置为 frontmatter 以使用每个文件的 frontmatter 中的 title 字段(如果未设置则回退到文件名)。各个文件夹可以使用每个文件夹的 title-source 设置覆盖此全局默认值。

settings.substitute-env-vars
booleanDefaults to false

如果设置为 true,在构建时将 ${ENV_VAR} 表达式替换为环境变量值。对于将 API 密钥、基础 URL 或版本号注入到文档中很有用。

example.mdx
1连接到我们的 API:${API_BASE_URL}/v1
2
3您的 API 密钥:${API_KEY}

替换在 Markdown/MDX 文件和 API 规范 (OpenAPI) 中有效。为避免与模板字面量冲突,JavaScript 文件被排除。

要输出字面 ${VAR},请转义为 \$\{VAR\}

在本地预览期间(fern docs dev),未定义的变量解析为空字符串。在发布期间,未定义的变量会导致构建失败。

页面操作配置

配置在整个文档中出现的页面操作按钮。默认情况下,复制页面 (copy-page)、查看为 Markdown (view-as-markdown)、Ask AI (ask-ai)、ChatGPT (chatgpt)、Claude (claude)、Claude Code (claude-code) 和 Cursor (cursor) 都已启用。

要在单个页面上隐藏页面操作,请使用 hide-page-actions frontmatter 属性

docs.yml
1page-actions:
2 default: copy-page
3 options:
4 copy-page: false
5 ask-ai: false
6 cursor: true
page-actions.default
string

要显示的默认页面操作。选项:copy-pageview-as-markdownask-aichatgptclaudeclaude-codecursorvscode

page-actions.options.copy-page
booleanDefaults to true

启用时,显示允许用户将整个页面内容复制到剪贴板的按钮,便于共享或参考。要控制复制输出中出现的内容,请使用 <llms-ignore> 标签。

page-actions.options.view-as-markdown
booleanDefaults to true

启用时,显示允许用户查看当前页面原始 Markdown 源代码的按钮。用户也可以通过在页面 URL 后附加 .md 查看 Markdown。要控制 Markdown 输出中出现的内容,请使用 <llms-ignore> 标签。

page-actions.options.ask-ai
booleanDefaults to true

启用时,显示”Ask AI”按钮,允许用户使用 AI 支持的助手询问关于页面内容的问题。

page-actions.options.chatgpt
booleanDefaults to true

控制”在 ChatGPT 中打开”按钮,该按钮将页面内容发送到 ChatGPT 进行进一步探索和问答。设置为 false 以隐藏它。

page-actions.options.claude
booleanDefaults to true

控制”在 Claude 中打开”按钮,该按钮将页面内容发送到 Claude 进行进一步探索和问答。设置为 false 以隐藏它。

page-actions.options.claude-code
booleanDefaults to true

控制”连接到 Claude Code”按钮,该按钮将 claude mcp add 命令复制到剪贴板,以便用户可以在 Claude Code 中注册文档网站的 MCP 服务器。当启用 Ask Fern 时默认显示。设置为 false 以隐藏它。

page-actions.options.cursor
booleanDefaults to true

控制”连接到 Cursor”按钮,该按钮通过深链接在 Cursor 中安装文档网站的 MCP 服务器。当启用 Ask Fern 时默认显示。设置为 false 以隐藏它。

page-actions.options.vscode
booleanDefaults to false

启用时,显示”在 VS Code 中打开”按钮,允许用户在 Visual Studio Code 中打开页面内容进行编辑和开发。需要启用 Ask Fern

page-actions.options.mcp
booleanDefaults to true

控制站点的 MCP 服务器端点。设置为 false 时,/_mcp/server 端点返回 404,其 URL 从 llms.txt 和代理提示中删除,连接到 Claude Code / 连接到 Cursor 按钮也会隐藏。适用于未经身份验证的 AI 代理会发现端点但无法访问的需要身份验证的站点

自定义页面操作

定义带有您自己的标题、图标和 URL 的自定义页面操作按钮。自定义操作与内置页面操作一起出现,可以链接到外部工具、编辑器或任何 URL。

docs.yml
1page-actions:
2 options:
3 custom:
4 - title: 在 Windsurf 中打开
5 subtitle: 使用 AI 辅助编辑
6 url: "windsurf://open?url={url}" # 使用 {url} 占位符
7 icon: fa-solid fa-wind
8 - title: 报告问题
9 subtitle: 发现问题?让我们知道
10 url: "https://github.com/your-org/docs/issues/new?title=Issue on {slug}&body=Page: {url}" # 多个占位符
11 icon: fa-brands fa-github
12 default: true # 将此自定义操作设置为默认值
page-actions.options.custom
list of objects

自定义页面操作配置数组。每个自定义操作在页面操作菜单中显示为一个按钮。

page-actions.options.custom[].title
stringRequired

为自定义操作按钮显示的标题。

page-actions.options.custom[].subtitle
string

在操作菜单中标题下方显示的可选帮助文本。

page-actions.options.custom[].url
stringRequired

点击操作时要导航到的 URL。支持以下占位符:

  • {slug}:当前页面的 slug(例如 getting-started/quickstart
  • {domain}:当前域名(例如 docs.example.com
  • {url}:当前页面的完整 URL(例如 https://docs.example.com/getting-started/quickstart
page-actions.options.custom[].icon
string

为自定义操作显示的图标。

Icons can be in three formats:

  • Font Awesome icons: Use icon names like fa-solid fa-rocket. Pro and Brand Icons from Font Awesome are supported.
  • Custom image files: Use relative paths to image files (e.g., ./assets/icons/my-icon.svg or ../assets/icons/my-icon.png). Paths are relative to the YAML file where the icon is referenced (e.g., docs.yml). For example, if you set an icon in fern/products/my-product.yml, the path ./assets/icon.svg resolves to fern/products/assets/icon.svg. If you set it in fern/docs.yml, the same path resolves to fern/assets/icon.svg.
  • Inline SVG: Provide an SVG string wrapped in quotes (e.g., "<svg>...</svg>").
page-actions.options.custom[].default
booleanDefaults to false

当设置为 true 时,此自定义操作成为在页面操作区域中突出显示的默认操作。

如果您在自定义操作上设置了 default: true,请不要同时设置 page-actions.default 以避免冲突。

“编辑此页面”配置

在每个文档页面底部添加”编辑此页面”链接,让读者可以轻松建议更改。在您的 docs.yml 文件中按实例配置。

1instances:
2 - url: plantstore.docs.buildwithfern.com
3 edit-this-page:
4 github:
5 owner: fern
6 repo: plant-store-docs
7 branch: main
8 launch: dashboard

当使用 launch: github 时,GitHub 仓库必须是公开的,“编辑此页面”链接才能正常工作。使用 launch: dashboard 时,具有编辑权限的用户可以通过 Fern Editor 进行编辑,无论仓库的可见性如何。

github.owner
stringRequired

拥有文档仓库的 GitHub 组织。

github.repo
stringRequired

包含您的 fern 文件夹的 GitHub 仓库名称。

github.branch
stringRequired

您希望 GitHub 编辑器打开 PR 到的仓库分支。默认为 main

launch
'github' | 'dashboard'Defaults to github

控制”编辑此页面”按钮的行为。当设置为 dashboard 时,点击按钮会打开一个屏幕,用户可以在其中选择为该页面启动 Fern Editor 会话或直接前往 GitHub 中的源代码(最适合内部网站)。默认为 github,直接链接到 GitHub 上的文件(最适合面向公众的网站)。

着陆页配置

设置专用着陆页作为文档网站的入口点。

docs.yml
1landing-page:
2 page: 页面标题
3 path: path/to/landing-page.mdx
4 slug: /welcome
page
stringRequired

着陆页的名称。

path
stringRequired

所需着陆页 Markdown 文件的相对文件路径。路径相对于设置它的 YAML 文件(例如 docs.yml)。

slug
string

着陆页的 slug。默认为页面名称。

slug 也可以在着陆页 Markdown 文件的 frontmatter 中覆盖。

SEO 元数据配置

配置网站范围的 Open Graph 和 Twitter Card 元数据,控制您的文档在社交媒体预览和搜索结果中的显示方式。

想要为单个页面设置元数据?

在页面的 frontmatter 中使用 keywords 属性

docs.yml
1metadata:
2 # 核心平台身份
3 og:site_name: "Square 开发者文档"
4 og:title: "Square 开发者平台 | 支付、商务和银行 API"
5 og:description: "使用 Square 的 API 和 SDK 套件构建。接受支付、管理库存、创建忠诚度计划并访问金融服务。为构建商务未来的开发者提供完整文档。"
6 og:url: "https://developer.squareup.com/docs"
7
8 # 社交分享资源
9 og:image: "https://developer.squareup.com/images/docs-social-card.png"
10 og:image:width: 1200
11 og:image:height: 630
12 og:locale: "zh_CN"
13 og:logo: "https://developer.squareup.com/images/square-logo.png"
14
15 # 动态 OG 图像(测试版)
16 og:dynamic: true
17 og:dynamic:background-image: "https://developer.squareup.com/images/og-background.png"
18
19 # Twitter/X
20 twitter:title: "Square 开发者平台文档"
21 twitter:description: "将支付、销售点、库存和金融服务集成到您的应用程序中,使用 Square 的开发者平台。从我们的 API、SDK 和全面指南开始。"
22 twitter:handle: "@SquareDev"
23 twitter:image: "https://developer.squareup.com/images/twitter-card.png"
24 twitter:site: "@Square"
25 twitter:card: "summary_large_image"
metadata.og:site_name
string

您的网站在 Open Graph 标签中的名称。

metadata.og:title
string

在社交媒体预览中显示的标题。

metadata.og:description
string

在社交媒体预览中显示的描述。

metadata.og:url
string

您文档的规范 URL。

metadata.og:image
string

在社交媒体预览中显示的图像。推荐尺寸为 1200x630 像素。

metadata.og:image:width
number

Open Graph 图像的宽度(像素)。

<ParamField path=“metadata.og:image