> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

## 标签页变体

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

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

**`docs.yml`**

```yaml title="docs.yml"
navigation:
  - tab: guides
    variants:
      - title: For developers
        layout:
          - section: Getting started
            contents:
              - page: Quick start
                path: ./pages/dev-quickstart.mdx
      - title: For product managers
        default: true
        layout:
          - section: Getting started
            contents:
              - page: Overview
                path: ./pages/pm-overview.mdx
```

阅读文档

## 在导航中使用自定义图标

您可以在整个 `docs.yml` 导航配置中使用自己的图片文件作为图标，包括[导航栏链接](/learn/zh/docs/configuration/site-level-settings#navbar-links-configuration)、[章节、页面](/learn/zh/docs/configuration/navigation#sidebar-icons)和[产品](/learn/zh/docs/configuration/products#add-your-product-configuration)图标。

图标支持三种格式：

* **Font Awesome 图标**：使用像 `fa-solid fa-seedling` 或 `fa-regular fa-leaf` 这样的图标名称。支持 Font Awesome 的 Pro 和 Brand 图标。
* **自定义图片文件**：使用自定义图片文件的相对路径（例如，`./assets/icons/plant-icon.svg`）。路径相对于引用图标的 YAML 文件（例如，`docs.yml`）。
* **内联 SVG**：提供用引号包装的 SVG 字符串。

**`Sidebar icons in docs.yml`**

```yaml Sidebar icons in docs.yml
navigation:
  - section: Home
    icon: fa-regular fa-home  # Font Awesome icon
    contents:
      - page: Introduction
        icon: ./assets/icons/intro-icon.svg  # Custom image file
        path: ./pages/intro.mdx
      - page: Custom Features
        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
        path: ./pages/custom.mdx
  - api: API Reference
    icon: fa-regular fa-puzzle
```

阅读文档

## 外部产品链接

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

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

要定义外部产品，在 `docs.yml` 的 `products` 列表中添加一个带有 `href` 而不是 `path` 的项目：

**`docs.yml`**

```yaml title="docs.yml"
products:
  - display-name: API Documentation
    path: ./products/api-docs.yml
    icon: fa-solid fa-book
    slug: api-docs
    subtitle: Complete API reference

  - display-name: Dashboard # External product
    href: https://dashboard.example.com
    icon: fa-solid fa-chart-line
    subtitle: Analytics and insights
```

阅读文档