> ## Documentation Index
> Fetch the complete documentation index at: https://tomee-mintlify-038c04aa.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 变体

> 使用 variation 组件根据读者所选的变体（如地区、套餐或受众）有条件地显示内容。

使用 `Variation` 组件根据读者在变体下拉菜单中所选的变体来显示或隐藏内容。当同一页面需要面向不同的受众、地区、套餐或部署目标进行说明，又不想重复整个页面时，变体非常有用。

<Note>
  变体功能可用于 [Willow 主题](/zh/customize/themes)。在其他主题上，配置和切换器会被忽略。
</Note>

<div id="configure-variations">
  ## 配置变体
</div>

在你的 `docs.json` 中添加一个 `variations` 对象，其中包含你希望读者可以切换的选项。第一个选项是默认选项。

```json docs.json theme={null}
{
  "theme": "willow",
  "variations": {
    "options": [
      { "id": "cloud", "label": "Cloud" },
      { "id": "self-hosted", "label": "自托管" }
    ]
  }
}
```

<ResponseField name="options" type="array" required>
  按显示顺序排列的变体选项。第一个选项是默认选项。每个选项需要：

  * `id`：在 `Variation` 组件和 URL 中使用的稳定、唯一标识符。
  * `label`：在变体下拉菜单中显示的名称。
</ResponseField>

配置 `variations` 后，会在目录侧边栏、侧边面板、更新日志过滤器以及移动端内联位置的现有视图切换器上方出现一个 **变体** 下拉菜单。

<div id="use-the-component">
  ## 使用组件
</div>

将条件内容包裹在 `Variation` 组件中，并将 `is` 设为应显示该内容的选项 `id`。`Variation` 块之外的内容始终显示。

```mdx theme={null}
两种受众都会看到这段介绍。

<Variation is="cloud">
  在 [app.example.com](https://app.example.com) 登录以获取你的 API 密钥。
</Variation>

<Variation is="self-hosted">
  在你的实例的管理控制台中生成 API 密钥。
</Variation>
```

若要在多个变体之间共享内容，请将数组传递给 `is`：

```mdx theme={null}
<Variation is={["cloud", "self-hosted"]}>
  将你的 API 密钥保存在 `EXAMPLE_API_KEY` 环境变量中。
</Variation>
```

<div id="how-readers-switch-variations">
  ## 读者如何切换变体
</div>

* 读者从目录侧边栏的下拉菜单中选择变体。
* 选择结果按项目保存在本地存储中，因此读者在页面之间切换时会保留其选择的变体。
* 当前变体会以 `?variation=<id>` 的形式反映在 URL 中，便于分享指向特定变体的链接。

<div id="table-of-contents-behavior">
  ## 目录行为
</div>

当另一变体处于活动状态时，`Variation` 块内的标题会自动从目录中过滤掉。位于任何 `Variation` 块之外的标题始终显示。

嵌套的 `Variation` 块之间会取交集：只有当内层块的 `is` 值与所有外层块都兼容时，内层块才会显示。

<div id="properties">
  ## 属性
</div>

<ResponseField name="is" type="string 或 string[]" required>
  用于显示所包裹内容的变体 `id`（或 id 数组）。这些 id 必须与 `docs.json` 中 `variations.options` 定义的选项相匹配。
</ResponseField>