`, which makes it easy to share a link to a specific variation.
+
+## Table of contents behavior
+
+Headings inside a `Variation` block are automatically filtered from the table of contents when a different variation is active. Headings outside any `Variation` block always appear.
+
+Nested `Variation` blocks intersect: an inner block only shows when its `is` value is compatible with every enclosing block.
+
+## Properties
+
+
+ The variation `id` (or array of ids) that should reveal the wrapped content. Ids must match an option defined in `variations.options` in `docs.json`.
+
diff --git a/docs.json b/docs.json
index 3082c0864..7ddf5770c 100644
--- a/docs.json
+++ b/docs.json
@@ -152,6 +152,7 @@
"components/tooltips",
"components/tree",
"components/update",
+ "components/variation",
"components/view",
"components/visibility"
]
diff --git a/es.json b/es.json
index 3979e6ca3..0fa36fa65 100644
--- a/es.json
+++ b/es.json
@@ -131,6 +131,7 @@
"es/components/tooltips",
"es/components/tree",
"es/components/update",
+ "es/components/variation",
"es/components/view",
"es/components/visibility"
]
diff --git a/es/components/variation.mdx b/es/components/variation.mdx
new file mode 100644
index 000000000..f60078eb7
--- /dev/null
+++ b/es/components/variation.mdx
@@ -0,0 +1,89 @@
+---
+title: "Variación"
+description: "Usa el componente variation para mostrar contenido de forma condicional según la variación elegida por el lector, como región, plan o audiencia."
+keywords: ["variación", "contenido condicional", "audiencia", "región", "willow"]
+boost: 3
+---
+
+Usa el componente `Variation` para mostrar u ocultar contenido según la variación que el lector seleccione en el menú desplegable de variaciones. Las variaciones son útiles cuando la misma página debe describir una audiencia, región, nivel de plan o entorno de despliegue distintos sin duplicar la página.
+
+
+ Las variaciones están disponibles en el [tema Willow](/es/customize/themes). En otros temas, se ignoran la configuración y el selector.
+
+
+
+ ## Configurar variaciones
+
+
+Añade un objeto `variations` en tu `docs.json` con las opciones entre las que quieres que los lectores puedan cambiar. La primera opción es la predeterminada.
+
+```json docs.json
+{
+ "theme": "willow",
+ "variations": {
+ "options": [
+ { "id": "cloud", "label": "Cloud" },
+ { "id": "self-hosted", "label": "Autohospedado" }
+ ]
+ }
+}
+```
+
+
+ Opciones de variación en el orden en que se muestran. La primera opción es la predeterminada. Cada opción requiere:
+
+ - `id`: Un identificador único y estable que se usa en el componente `Variation` y en la URL.
+ - `label`: El nombre visible en el menú desplegable de variaciones.
+
+
+Cuando `variations` está configurado, aparece un menú desplegable de **Variación** encima del selector de vistas existente en la barra lateral del índice, en los paneles laterales, en los filtros del changelog y en línea en móviles.
+
+
+ ## Usar el componente
+
+
+Envuelve el contenido condicional en un componente `Variation` y establece `is` con el `id` de la opción que debe revelarlo. El contenido fuera de un bloque `Variation` se muestra siempre.
+
+```mdx
+Ambas audiencias ven esta introducción.
+
+
+ Inicia sesión en [app.example.com](https://app.example.com) para obtener tu clave de API.
+
+
+
+ Genera una clave de API desde la consola de administración de tu instancia.
+
+```
+
+Para compartir contenido entre varias variaciones, pasa un array a `is`:
+
+```mdx
+
+ Guarda tu clave de API en la variable de entorno `EXAMPLE_API_KEY`.
+
+```
+
+
+ ## Cómo cambian de variación los lectores
+
+
+- Los lectores eligen una variación en el menú desplegable de la barra lateral del índice.
+- La selección se guarda en el almacenamiento local por proyecto, por lo que los lectores mantienen su variación al navegar entre páginas.
+- La variación actual se refleja en la URL como `?variation=`, lo que facilita compartir un enlace a una variación concreta.
+
+
+ ## Comportamiento del índice
+
+
+Los encabezados dentro de un bloque `Variation` se filtran automáticamente del índice cuando hay otra variación activa. Los encabezados fuera de cualquier bloque `Variation` siempre aparecen.
+
+Los bloques `Variation` anidados se intersectan: un bloque interno solo se muestra cuando su valor de `is` es compatible con todos los bloques que lo contienen.
+
+
+ ## Propiedades
+
+
+
+ El `id` de variación (o el array de ids) que debe revelar el contenido envuelto. Los ids deben coincidir con una opción definida en `variations.options` en `docs.json`.
+
diff --git a/fr.json b/fr.json
index a754385cb..e7f345780 100644
--- a/fr.json
+++ b/fr.json
@@ -131,6 +131,7 @@
"fr/components/tooltips",
"fr/components/tree",
"fr/components/update",
+ "fr/components/variation",
"fr/components/view",
"fr/components/visibility"
]
diff --git a/fr/components/variation.mdx b/fr/components/variation.mdx
new file mode 100644
index 000000000..c7038c14d
--- /dev/null
+++ b/fr/components/variation.mdx
@@ -0,0 +1,89 @@
+---
+title: "Variation"
+description: "Utilisez le composant variation pour afficher un contenu conditionnel selon la variation choisie par le lecteur, comme la région, le plan ou l'audience."
+keywords: ["variation", "contenu conditionnel", "audience", "région", "willow"]
+boost: 3
+---
+
+Utilisez le composant `Variation` pour afficher ou masquer du contenu selon la variation choisie par le lecteur dans le menu déroulant de variations. Les variations sont utiles quand la même page doit décrire une audience, une région, un niveau d'offre ou une cible de déploiement différents sans dupliquer la page.
+
+
+ Les variations sont disponibles sur le [thème Willow](/fr/customize/themes). Sur les autres thèmes, la configuration et le sélecteur sont ignorés.
+
+
+
+ ## Configurer les variations
+
+
+Ajoutez un objet `variations` à votre `docs.json` avec les options entre lesquelles vous voulez que les lecteurs puissent basculer. La première option est la valeur par défaut.
+
+```json docs.json
+{
+ "theme": "willow",
+ "variations": {
+ "options": [
+ { "id": "cloud", "label": "Cloud" },
+ { "id": "self-hosted", "label": "Auto-hébergé" }
+ ]
+ }
+}
+```
+
+
+ Options de variation dans l'ordre d'affichage. La première option est la valeur par défaut. Chaque option nécessite :
+
+ - `id` : Un identifiant stable et unique utilisé dans le composant `Variation` et dans l'URL.
+ - `label` : Le nom affiché dans le menu déroulant de variations.
+
+
+Quand `variations` est configuré, un menu déroulant **Variation** apparaît au-dessus du sélecteur de vue existant dans la barre latérale de la table des matières, les panneaux latéraux, les filtres du changelog et en ligne sur mobile.
+
+
+ ## Utiliser le composant
+
+
+Enveloppez le contenu conditionnel dans un composant `Variation` et définissez `is` sur l'`id` de l'option qui doit le révéler. Le contenu hors d'un bloc `Variation` est toujours affiché.
+
+```mdx
+Les deux audiences voient cette introduction.
+
+
+ Connectez-vous sur [app.example.com](https://app.example.com) pour obtenir votre clé API.
+
+
+
+ Générez une clé API depuis la console d'administration de votre instance.
+
+```
+
+Pour partager du contenu entre plusieurs variations, passez un tableau à `is` :
+
+```mdx
+
+ Stockez votre clé API dans la variable d'environnement `EXAMPLE_API_KEY`.
+
+```
+
+
+ ## Comment les lecteurs changent de variation
+
+
+- Les lecteurs choisissent une variation dans le menu déroulant de la barre latérale de la table des matières.
+- La sélection est enregistrée dans le stockage local par projet, ce qui permet aux lecteurs de conserver leur variation en naviguant entre les pages.
+- La variation active est reflétée dans l'URL sous la forme `?variation=`, ce qui facilite le partage d'un lien vers une variation précise.
+
+
+ ## Comportement de la table des matières
+
+
+Les titres à l'intérieur d'un bloc `Variation` sont automatiquement filtrés de la table des matières quand une autre variation est active. Les titres en dehors de tout bloc `Variation` apparaissent toujours.
+
+Les blocs `Variation` imbriqués se croisent : un bloc interne ne s'affiche que si sa valeur `is` est compatible avec tous les blocs englobants.
+
+
+ ## Propriétés
+
+
+
+ L'`id` de variation (ou le tableau d'ids) qui doit révéler le contenu enveloppé. Les ids doivent correspondre à une option définie dans `variations.options` dans `docs.json`.
+
diff --git a/zh.json b/zh.json
index 58ea7d65e..cf2938899 100644
--- a/zh.json
+++ b/zh.json
@@ -128,6 +128,7 @@
"zh/components/tooltips",
"zh/components/tree",
"zh/components/update",
+ "zh/components/variation",
"zh/components/view",
"zh/components/visibility"
]
diff --git a/zh/components/variation.mdx b/zh/components/variation.mdx
new file mode 100644
index 000000000..e6c90c2ae
--- /dev/null
+++ b/zh/components/variation.mdx
@@ -0,0 +1,89 @@
+---
+title: "变体"
+description: "使用 variation 组件根据读者所选的变体（如地区、套餐或受众）有条件地显示内容。"
+keywords: ["变体", "条件内容", "受众", "地区", "willow"]
+boost: 3
+---
+
+使用 `Variation` 组件根据读者在变体下拉菜单中所选的变体来显示或隐藏内容。当同一页面需要面向不同的受众、地区、套餐或部署目标进行说明，又不想重复整个页面时，变体非常有用。
+
+
+ 变体功能可用于 [Willow 主题](/zh/customize/themes)。在其他主题上，配置和切换器会被忽略。
+
+
+
+ ## 配置变体
+
+
+在你的 `docs.json` 中添加一个 `variations` 对象，其中包含你希望读者可以切换的选项。第一个选项是默认选项。
+
+```json docs.json
+{
+ "theme": "willow",
+ "variations": {
+ "options": [
+ { "id": "cloud", "label": "Cloud" },
+ { "id": "self-hosted", "label": "自托管" }
+ ]
+ }
+}
+```
+
+
+ 按显示顺序排列的变体选项。第一个选项是默认选项。每个选项需要：
+
+ - `id`：在 `Variation` 组件和 URL 中使用的稳定、唯一标识符。
+ - `label`：在变体下拉菜单中显示的名称。
+
+
+配置 `variations` 后，会在目录侧边栏、侧边面板、更新日志过滤器以及移动端内联位置的现有视图切换器上方出现一个 **变体** 下拉菜单。
+
+
+ ## 使用组件
+
+
+将条件内容包裹在 `Variation` 组件中，并将 `is` 设为应显示该内容的选项 `id`。`Variation` 块之外的内容始终显示。
+
+```mdx
+两种受众都会看到这段介绍。
+
+
+ 在 [app.example.com](https://app.example.com) 登录以获取你的 API 密钥。
+
+
+
+ 在你的实例的管理控制台中生成 API 密钥。
+
+```
+
+若要在多个变体之间共享内容，请将数组传递给 `is`：
+
+```mdx
+
+ 将你的 API 密钥保存在 `EXAMPLE_API_KEY` 环境变量中。
+
+```
+
+
+ ## 读者如何切换变体
+
+
+- 读者从目录侧边栏的下拉菜单中选择变体。
+- 选择结果按项目保存在本地存储中，因此读者在页面之间切换时会保留其选择的变体。
+- 当前变体会以 `?variation=` 的形式反映在 URL 中，便于分享指向特定变体的链接。
+
+
+ ## 目录行为
+
+
+当另一变体处于活动状态时，`Variation` 块内的标题会自动从目录中过滤掉。位于任何 `Variation` 块之外的标题始终显示。
+
+嵌套的 `Variation` 块之间会取交集：只有当内层块的 `is` 值与所有外层块都兼容时，内层块才会显示。
+
+
+ ## 属性
+
+
+
+ 用于显示所包裹内容的变体 `id`（或 id 数组）。这些 id 必须与 `docs.json` 中 `variations.options` 定义的选项相匹配。
+