跳到导航

标签页变体

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

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

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 导航配置中使用自己的图片文件作为图标,包括导航栏链接、章节、页面和产品图标。

图标支持三种格式:

  • 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
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
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
阅读文档