November 3, 2025

标签页变体

使用新的变体功能在单个标签页中创建多种内容变体。这样您可以为同一主题展示不同的视角、用户类型或实现方法,而无需创建单独的标签页。

您现在可以为标签页定义具有不同布局、标题、副标题和图标的变体。每个变体可以有自己的导航结构,您还可以明确设置哪个变体应该是默认的。

docs.yml
1navigation:
2 - tab: guides
3 variants:
4 - title: For developers
5 layout:
6 - section: Getting started
7 contents:
8 - page: Quick start
9 path: ./pages/dev-quickstart.mdx
10 - title: For product managers
11 default: true
12 layout:
13 - section: Getting started
14 contents:
15 - page: Overview
16 path: ./pages/pm-overview.mdx
阅读文档

在导航中使用自定义图标

您可以在整个 docs.yml 导航配置中使用自己的图片文件作为图标,包括导航栏链接章节、页面产品图标。

图标支持三种格式:

  • Font Awesome 图标:使用像 fa-solid fa-seedlingfa-regular fa-leaf 这样的图标名称。支持 Font Awesome 的 Pro 和 Brand 图标。
  • 自定义图片文件:使用自定义图片文件的相对路径(例如,./assets/icons/plant-icon.svg)。路径相对于引用图标的 YAML 文件(例如,docs.yml)。
  • 内联 SVG:提供用引号包装的 SVG 字符串。
Sidebar icons in docs.yml
1navigation:
2 - section: Home
3 icon: fa-regular fa-home # Font Awesome icon
4 contents:
5 - page: Introduction
6 icon: ./assets/icons/intro-icon.svg # Custom image file
7 path: ./pages/intro.mdx
8 - page: Custom Features
9 icon: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z'/></svg>" # Inline SVG
10 path: ./pages/custom.mdx
11 - api: API Reference
12 icon: fa-regular fa-puzzle
阅读文档

外部产品链接

您现在可以配置产品链接到外部 URL(独立应用程序、第三方文档或其他外部资源),而不是站点内的文档。

外部产品会与内部产品一起出现在产品切换器中,但在被选中时会将用户导航到指定的 URL。与内部产品不同,外部产品直接在 docs.yml 中使用 href 定义,不需要独立的产品 .yml 文件。

要定义外部产品,在 docs.ymlproducts 列表中添加一个带有 href 而不是 path 的项目:

docs.yml
1products:
2 - display-name: API Documentation
3 path: ./products/api-docs.yml
4 icon: fa-solid fa-book
5 slug: api-docs
6 subtitle: Complete API reference
7
8 - display-name: Dashboard # External product
9 href: https://dashboard.example.com
10 icon: fa-solid fa-chart-line
11 subtitle: Analytics and insights
阅读文档