网站级别设置
在 docs.yml 中自定义颜色、字体、徽标、布局、导航栏链接和分析
docs.yml 文件是您在文档网站中自定义颜色、字体、布局、分析等的主要工具。对于大多数自定义需求,请从这里开始,然后再考虑自定义 CSS 和 JavaScript 来满足高级使用场景。
YAML 架构验证
要在编辑器中启用智能 YAML 验证和自动完成功能,请在您的 docs.yml 文件顶部添加这一行:
这将启用基于 Fern 的完整架构的实时架构验证和自动完成功能。
核心配置
每个 Fern 文档网站都需要一个 docs.yml 文件,其中包含核心配置设置。以下是您可以配置的基本顶级属性:
title
用作选项卡标题的字符串。
logo
为您的网站设置自定义徽标。了解更多关于logo 配置的信息。
favicon
网站图标的相对文件路径。路径相对于设置它的 YAML 文件(例如 docs.yml)。
colors
配置 primaryAccent 和 background 颜色。了解更多关于colors 配置的信息。
redirects
您想要配置为永久重定向到另一个路径的路径数组。了解更多关于redirects 配置的信息。
navbar-links
您想要包含作为号召性用语的链接的名称和 URL 数组。了解更多关于navbar-links 配置的信息。
background-image
设置在每个页面后显示的自定义背景图像。了解更多关于background-image 配置的信息。
typography
自定义文档网站中使用的字体。了解更多关于typography 配置的信息。
layout
自定义文档网站的布局。了解更多关于layout 配置的信息。
settings
自定义文档网站的设置。了解更多关于settings 配置的信息。
landing-page
为您的文档网站创建着陆页。了解更多关于landing-page 配置的信息。
default-language
设置 API 参考中代码片段显示的默认语言。
选项包括:typescript、python、java、go、ruby、csharp、php、swift、curl
metadata
配置文档网站的 SEO 元数据。了解更多关于metadata 配置的信息。
global-theme
应用于此网站的全局主题的名称。CLI 在发布时从 Fern 的注册表获取命名主题,并将其品牌字段(徽标、颜色、字体、布局、CSS、JS 等)合并到本地 docs.yml 中。使用此功能在多个文档网站间共享一致的视觉标识。
header
自定义 React 组件文件(TSX 或 JSX)的路径,用于替换 Fern 的默认页头。组件必须有默认导出。了解更多关于自定义页头和页脚组件的信息。
footer
自定义 React 组件文件(TSX 或 JSX)的路径,用于替换 Fern 的默认页脚。组件必须有默认导出。了解更多关于自定义页头和页脚组件的信息。
实例配置
instance(实例)是独特文档网站的后端。每个实例使用 --instance 标志发布到唯一域名。最常见的是使用实例来配置发布到不同 URL 的预发布和生产环境文档。
instances
配置一个或多个文档网站。
instances.url
部署 Fern 文档的 URL。必须包含后缀 docs.buildwithfern.com。
instances.custom-domain
托管文档的自定义域名。了解更多关于设置自定义域名的信息。
instances.edit-this-page
如果指定,会在每个页面底部添加”编辑此页面”链接,该链接指向给定的公共 GitHub 仓库。您可以选择设置 launch 目标来控制链接的跳转位置。了解更多关于edit-this-page 配置的信息。
instances.audiences
指定此实例服务的受众(例如,内部开发者、测试用户、公共客户)。
您可以使用受众来控制每个文档实例中显示哪些版本和产品,从而为不同用户群体创建单独的网站。当内容的受众标签与实例受众匹配时,内容会被包含。没有受众标签的内容默认包含。了解更多关于为产品和/或版本配置实例受众的信息。
instances.multi-source
当为 true 时,CLI 使用基础路径感知发布,以便多个独立仓库可以使用不同基础路径发布到同一自定义域名。启用此功能时,url 和 custom-domain 必须共享相同的基础路径。了解更多关于多源文档的信息。
颜色配置
配置文档在浅色和深色模式下的调色板。只有 accent-primary 是必需的——所有其他颜色都有合理的默认值。这些颜色在您的自定义样式表中也会自动作为 CSS 自定义属性可用。
accent-primary
用于链接、按钮和高亮文本等交互元素的主要品牌色。 为浅色和深色模式配置不同的颜色以确保适当的对比度和可见性。
background
所有文档页面的主要背景色。选择与文本形成良好对比 并与您的品牌色互补的颜色。深色模式颜色应减少眼部疲劳。
border
用于分割线、元素边框和视觉分隔符。选择能创造 清晰边界但不太突出的微妙颜色。
sidebar-background
导航侧边栏的背景色。指定时,右侧包含 1px 边框。 如果省略,侧边栏使用透明背景且无边框。
header-background
顶部导航页头的背景色。指定时,底部包含 1px 实线边框。 如果省略,页头使用透明背景和微妙的渐变边框。
card-background
卡片、代码块和其他容器元素的背景色。应该与主要背景 稍有不同,以创建视觉层次同时保持可读性。
徽标配置
配置网站徽标,支持浅色和深色模式的不同图像、可点击链接和可选显示文本。
logo.href
用户点击徽标时会跳转到的 URL。通常是您公司的主页或应用程序。
logo.dark
深色模式徽标文件的路径,相对于设置它的 YAML 文件(例如 docs.yml)。建议使用 SVG 格式以获得最佳质量。示例:assets/images/logo-dark.svg
logo.light
浅色模式徽标文件的路径,相对于设置它的 YAML 文件(例如 docs.yml)。建议使用 SVG 格式以获得最佳质量。示例:assets/images/logo-light.svg
logo.right-text
在徽标图像右侧显示的文本。这对于在徽标旁边添加”Docs”或”API”等标签很有用。
logo.height
徽标的自定义高度(像素)。如果默认高度不适合您的设计,请使用此选项调整徽标大小。
重定向配置
在路径之间重定向流量,可以是精确路径或正则表达式模式。配置重定向指南详细介绍了示例和顺序规则。
您要重定向的相对路径(例如,/old-path)。必须是相对路径,而不是绝对 URL。不能包含搜索参数(例如,?key=value)。匹配前会对末尾斜杠进行归一化,因此 /old-path/ 和 /old-path 等价。请与所重定向 URL 的大小写保持一致。
您要路由到的路径。可以是内部路径(/new-path)或外部 URL(https://example.com)。外部 URL 必须包含完整地址,包括 https。
默认使用 308 状态码指示客户端和搜索引擎永久缓存重定向。只有在需要使用 307 状态码的临时重定向时才设置为 false,这不会被缓存。
导航栏链接配置
向文档网站的顶部导航栏添加导航链接和按钮。
type
outlined、minimal、filled、github 或 dropdown 中的一个。此值控制按钮的样式。
href
点击按钮后的 URL。示例:https://buildwithfern.com/book-demo
value
GitHub 仓库的 URL。类似于 href,但专门用于 GitHub 仓库链接。当 type 设置为 github 时使用此字段。示例:https://github.com/example-company/fern
text
按钮内的文本。
rounded
当为 true 时,按钮的边框半径将完全圆角。
icon
按钮中使用的图标。此图标将出现在文本内容的左侧。
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.svgor../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 infern/products/my-product.yml, the path./assets/icon.svgresolves tofern/products/assets/icon.svg. If you set it infern/docs.yml, the same path resolves tofern/assets/icon.svg. - Inline SVG: Provide an SVG string wrapped in quotes (e.g.,
"<svg>...</svg>").
rightIcon
按钮中使用的图标。此图标将出现在文本内容的右侧。
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.svgor../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 infern/products/my-product.yml, the path./assets/icon.svgresolves tofern/products/assets/icon.svg. If you set it infern/docs.yml, the same path resolves tofern/assets/icon.svg. - Inline SVG: Provide an SVG string wrapped in quotes (e.g.,
"<svg>...</svg>").
默认情况下,filled 按钮的 rightIcon 设置为 arrow-right。
target
指定在何处打开链接的 URL。对于典型的文档网站,链接可以在同一标签页(_self)或新标签页(_blank)中打开。对于嵌入在仪表板或 iframe 中的文档,链接可以在父框架(_parent)或最顶层框架(_top)中打开。
links
当 type 设置为 dropdown 时在下拉菜单中显示的项目。
links.text
为链接显示的文本。
links.href
链接指向的 URL。
links.icon
在文本左侧显示的 Font Awesome 图标。
links.rightIcon
在文本右侧显示的 Font Awesome 图标。
links.rounded
当为 true 时,链接将具有完全圆角边框。
links.target
指定在何处打开链接的 URL。
页脚链接配置
向文档网站页脚添加可点击的社交媒体和社区链接,以提高可发现性和参与度。
页脚链接提供到您社交渠道的视觉导航。要在页面或网站级别配置 SEO 元数据和社交媒体标签,请参阅元数据配置。
footer-links.github
您的 GitHub 仓库或组织的 URL。
footer-links.slack
您的 Slack 社区或工作空间的 URL。
footer-links.x
您的 X(原 Twitter)档案的 URL。
footer-links.twitter
您的 Twitter 档案的 URL。使用 footer-links.x 获得新的 X 品牌。
footer-links.linkedin
您的 LinkedIn 公司页面或档案的 URL。
footer-links.youtube
您的 YouTube 频道的 URL。
footer-links.instagram
您的 Instagram 档案的 URL。
footer-links.facebook
您的 Facebook 页面的 URL。
footer-links.discord
您的 Discord 服务器邀请的 URL。
footer-links.hackernews
您的 Hacker News 档案的 URL。
footer-links.medium
您的 Medium 出版物或档案的 URL。
footer-links.website
您的主网站或主页的 URL。
背景图像配置
设置自定义背景图像,在文档网站的每个页面后显示。
background-image.light
浅色模式背景图像的相对文件路径。路径相对于设置它的 YAML 文件(例如 docs.yml)。
background-image.dark
深色模式背景图像的相对文件路径。路径相对于设置它的 YAML 文件(例如 docs.yml)。
字体配置
自定义文档网站中用于正文、标题和代码块的字体。
typography.bodyFont
用于所有正文的字体,包括段落、列表和一般内容。 为了获得最佳性能,请使用 WOFF2 格式。
typography.headingsFont
用于标题、题目和其他突出文本元素的字体。如果您喜欢统一的外观, 可以与正文字体相同。支持不同标题级别的多种字重。
typography.codeFont
用于代码块和内联代码的字体。建议使用等宽字体以获得更好的代码可读性。 热门选择包括 JetBrains Mono、Fira Code 和 Source Code Pro。
字体配置
单一字重
可变字体
多个文件
name
字体的名称。默认为生成的名称,该名称将用于在最终注入的 CSS 中引用您的自定义字体。
path
字体文件的路径,相对于设置它的 YAML 文件(例如 docs.yml)。当您只有一个字体文件时使用此选项。对于多个字体文件(如粗体、斜体等的单独文件),请使用 paths。
weight
字体的字重。可以是数字(400、700)或可变字体的范围(400 700)。 常见值:400(正常)、700(粗体)。
style
字体样式,可以是”normal”或”italic”。如果未指定,默认为”normal”。
paths
特定字重的字体文件列表。列表中的每个元素包含 path、weight 和 style 属性。
布局配置
控制页头、侧边栏、内容区域和搜索栏等结构元素的尺寸和位置。
layout.header-height
设置页头的高度。默认为 4rem(64px)。有效选项为 {number}rem 或 {number}px。
layout.page-width
设置文档布局的最大宽度,包括侧边栏和内容。默认为 88rem(1408px)。
有效选项为 {number}rem、{number}px 或 full。
layout.content-width
设置 Markdown 文章内容的最大宽度。默认为 44rem(704px)。
有效选项为 {number}rem 或 {number}px。
layout.sidebar-width
设置桌面模式下侧边栏的宽度。默认为 18rem(288px)。有效选项为 {number}rem 或 {number}px。
layout.searchbar-placement
设置搜索栏的位置。可以是 header、sidebar 或 header-tabs(将搜索栏放在页头但在选项卡行)之一。
disable-header 设置为 true 时,此设置将被忽略。layout.tabs-placement
设置选项卡的位置。可以是 header 或 sidebar 之一。
disable-header 设置为 true 时,此设置将被忽略。layout.switcher-placement
设置产品和版本切换器的位置。可以是 header 或 sidebar 之一。
disable-header 设置为 true 时,此设置将被忽略。layout.content-alignment
设置 Markdown 内容的对齐方式。可以是 center 或 left 之一。
默认为 center。
layout.disable-header
如果设置为 true,页头将不会呈现。相反,徽标将作为侧边栏的一部分呈现, 1px 边框将分隔侧边栏和内容。
layout.hide-nav-links
如果设置为 true,页面底部的导航链接(上一页、下一页)将不会呈现。这可以通过页面 frontmatter在单个页面基础上覆盖。
layout.hide-feedback
如果设置为 true,反馈表单将不会呈现。这可以通过页面 frontmatter在单个页面基础上覆盖。
layout.mobile-toc
如果设置为 true,在移动设备和平板电脑视口(在 xl 断点以下)的页头下方显示粘性目录栏。该栏显示滚动进度指示器和当前标题,点击时展开为完整目录。
仅适用于使用guide 和 overview 布局的页面。当页面的标题少于两个或在页面 frontmatter 中设置了 hide-toc: true 时,该栏会隐藏。
主题配置
自定义文档网站中特定 UI 元素的视觉样式。
theme.sidebar
设置导航侧边栏的视觉样式。default 显示带有节标题和图标的完整侧边栏;minimal 显示没有装饰元素的更简洁、简化的侧边栏。
theme.body
设置主要内容正文的视觉样式。default 使用平面背景;canvas 在内容区域周围添加微妙的卡片式容器。
theme.tabs
配置导航选项卡。接受字符串(default 或 bubble)进行仅样式配置,或带有 style、alignment 和 placement 属性的对象进行完全控制。
当设置为字符串时,default 使用下划线选项卡,bubble 显示带有圆角药丸形背景的选项卡。
theme.tabs.style
设置导航选项卡的视觉样式。default 使用下划线选项卡;bubble 显示带有圆角药丸形背景的选项卡。
theme.tabs.alignment
当 placement 为 header 时设置选项卡的水平对齐方式。left 将选项卡左对齐;center 将其水平居中。当 placement 为 sidebar 时,对齐方式无效。
theme.tabs.placement
设置选项卡的位置。header 在顶部导航页头中显示选项卡;sidebar 在左侧侧边栏中显示它们。
当两者都设置时,优先于 layout.tabs-placement。当 layout.disable-header 设置为 true 时,此设置被忽略。
theme.page-actions
设置页面操作按钮的视觉样式。default 显示单独的图标按钮;toolbar 将操作分组为紧凑的水平工具栏。
theme.footer-nav
设置页脚导航链接的视觉样式。default 显示带有标题和描述的完整上一页/下一页卡片;minimal 显示简单的文本链接。
theme.product-switcher
设置产品切换器的视觉样式。default 显示下拉选择器;toggle 显示水平切换栏。
设置配置
配置网站范围的行为,如搜索、代码显示、404 处理和环境变量替换。
settings.search-text
在搜索栏中显示的文本。
settings.disable-search
如果设置为 true,搜索栏将被禁用。如果您想使用自定义搜索解决方案,请使用此选项。
settings.disable-explorer-proxy
如果设置为 true,API Explorer 在直接向您的 API 发送请求时将绕过代理。
启用此功能时,您的 API 必须启用跨域资源共享 (CORS) 以允许来自文档域名的请求。
settings.dark-mode-code
如果设置为 true,代码块将以深色模式显示,无论选择的主题如何。
settings.default-search-filters
控制搜索结果是否默认限定在用户当前的产品和版本范围内。
当设置为 false(默认值)时,搜索返回所有产品和版本的结果。当设置为 true 时,搜索 UI 会自动筛选结果以匹配用户当前浏览的产品和版本。用户可以从搜索 UI 中删除这些过滤器以扩大搜索范围。
settings.http-snippets
settings.hide-404-page
如果设置为 true,当用户导航到不存在的页面时,他们将被重定向到主页。
默认情况下,将显示 404 页面。
settings.use-javascript-as-typescript
如果设置为 true,TypeScript 片段将在 API 参考中显示为 JavaScript 片段。
settings.disable-analytics
如果设置为 true,在analytics 配置中配置的所有分析集成将被禁用。这包括 Google Analytics 4、Google Tag Manager、PostHog 和您配置的任何其他分析提供商。
settings.folder-title-source
设置在所有文件夹导航中导出页面和节标题的默认方法。默认情况下(filename),标题从文件名导出。设置为 frontmatter 以使用每个文件的 frontmatter 中的 title 字段(如果未设置则回退到文件名)。各个文件夹可以使用每个文件夹的 title-source 设置覆盖此全局默认值。
settings.substitute-env-vars
如果设置为 true,在构建时将 ${ENV_VAR} 表达式替换为环境变量值。对于将 API 密钥、基础 URL 或版本号注入到文档中很有用。
替换在 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 属性。
page-actions.default
要显示的默认页面操作。选项:copy-page、view-as-markdown、ask-ai、chatgpt、claude、claude-code、cursor、vscode。
page-actions.options.copy-page
启用时,显示允许用户将整个页面内容复制到剪贴板的按钮,便于共享或参考。要控制复制输出中出现的内容,请使用 <llms-ignore> 标签。
page-actions.options.view-as-markdown
启用时,显示允许用户查看当前页面原始 Markdown 源代码的按钮。用户也可以通过在页面 URL 后附加 .md 查看 Markdown。要控制 Markdown 输出中出现的内容,请使用 <llms-ignore> 标签。
page-actions.options.ask-ai
启用时,显示”Ask AI”按钮,允许用户使用 AI 支持的助手询问关于页面内容的问题。
page-actions.options.chatgpt
控制”在 ChatGPT 中打开”按钮,该按钮将页面内容发送到 ChatGPT 进行进一步探索和问答。设置为 false 以隐藏它。
page-actions.options.claude
控制”在 Claude 中打开”按钮,该按钮将页面内容发送到 Claude 进行进一步探索和问答。设置为 false 以隐藏它。
page-actions.options.claude-code
page-actions.options.cursor
page-actions.options.vscode
启用时,显示”在 VS Code 中打开”按钮,允许用户在 Visual Studio Code 中打开页面内容进行编辑和开发。需要启用 Ask Fern。
page-actions.options.mcp
自定义页面操作
定义带有您自己的标题、图标和 URL 的自定义页面操作按钮。自定义操作与内置页面操作一起出现,可以链接到外部工具、编辑器或任何 URL。
page-actions.options.custom
自定义页面操作配置数组。每个自定义操作在页面操作菜单中显示为一个按钮。
page-actions.options.custom[].title
为自定义操作按钮显示的标题。
page-actions.options.custom[].subtitle
在操作菜单中标题下方显示的可选帮助文本。
page-actions.options.custom[].url
点击操作时要导航到的 URL。支持以下占位符:
{slug}:当前页面的 slug(例如getting-started/quickstart){domain}:当前域名(例如docs.example.com){url}:当前页面的完整 URL(例如https://docs.example.com/getting-started/quickstart)
page-actions.options.custom[].icon
为自定义操作显示的图标。
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.svgor../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 infern/products/my-product.yml, the path./assets/icon.svgresolves tofern/products/assets/icon.svg. If you set it infern/docs.yml, the same path resolves tofern/assets/icon.svg. - Inline SVG: Provide an SVG string wrapped in quotes (e.g.,
"<svg>...</svg>").
page-actions.options.custom[].default
当设置为 true 时,此自定义操作成为在页面操作区域中突出显示的默认操作。
如果您在自定义操作上设置了 default: true,请不要同时设置 page-actions.default 以避免冲突。
“编辑此页面”配置
在每个文档页面底部添加”编辑此页面”链接,让读者可以轻松建议更改。在您的 docs.yml 文件中按实例配置。
单一实例
多个实例
当使用 launch: github 时,GitHub 仓库必须是公开的,“编辑此页面”链接才能正常工作。使用 launch: dashboard 时,具有编辑权限的用户可以通过 Fern Editor 进行编辑,无论仓库的可见性如何。
github.owner
拥有文档仓库的 GitHub 组织。
github.repo
包含您的 fern 文件夹的 GitHub 仓库名称。
github.branch
您希望 GitHub 编辑器打开 PR 到的仓库分支。默认为 main。
launch
控制”编辑此页面”按钮的行为。当设置为 dashboard 时,点击按钮会打开一个屏幕,用户可以在其中选择为该页面启动 Fern Editor 会话或直接前往 GitHub 中的源代码(最适合内部网站)。默认为 github,直接链接到 GitHub 上的文件(最适合面向公众的网站)。
着陆页配置
设置专用着陆页作为文档网站的入口点。
page
着陆页的名称。
所需着陆页 Markdown 文件的相对文件路径。路径相对于设置它的 YAML 文件(例如 docs.yml)。
slug
着陆页的 slug。默认为页面名称。
slug 也可以在着陆页 Markdown 文件的 frontmatter 中覆盖。
SEO 元数据配置
配置网站范围的 Open Graph 和 Twitter Card 元数据,控制您的文档在社交媒体预览和搜索结果中的显示方式。
想要为单个页面设置元数据?
您的网站在 Open Graph 标签中的名称。
在社交媒体预览中显示的标题。
在社交媒体预览中显示的描述。
您文档的规范 URL。
在社交媒体预览中显示的图像。推荐尺寸为 1200x630 像素。
Open Graph 图像的宽度(像素)。
<ParamField path=“metadata.og:image