Variation 组件根据读者在变体下拉菜单中所选的变体来显示或隐藏内容。当同一页面需要面向不同的受众、地区、套餐或部署目标进行说明,又不想重复整个页面时,变体非常有用。
变体功能可用于 Willow 主题。在其他主题上,配置和切换器会被忽略。
配置变体
docs.json 中添加一个 variations 对象,其中包含你希望读者可以切换的选项。第一个选项是默认选项。
docs.json
array
必填
按显示顺序排列的变体选项。第一个选项是默认选项。每个选项需要:
id:在Variation组件和 URL 中使用的稳定、唯一标识符。label:在变体下拉菜单中显示的名称。
variations 后,会在目录侧边栏、侧边面板、更新日志过滤器以及移动端内联位置的现有视图切换器上方出现一个 变体 下拉菜单。
使用组件
Variation 组件中,并将 is 设为应显示该内容的选项 id。Variation 块之外的内容始终显示。
is:
读者如何切换变体
- 读者从目录侧边栏的下拉菜单中选择变体。
- 选择结果按项目保存在本地存储中,因此读者在页面之间切换时会保留其选择的变体。
- 当前变体会以
?variation=<id>的形式反映在 URL 中,便于分享指向特定变体的链接。
目录行为
Variation 块内的标题会自动从目录中过滤掉。位于任何 Variation 块之外的标题始终显示。
嵌套的 Variation 块之间会取交集:只有当内层块的 is 值与所有外层块都兼容时,内层块才会显示。
属性
string 或 string[]
必填
用于显示所包裹内容的变体
id(或 id 数组)。这些 id 必须与 docs.json 中 variations.options 定义的选项相匹配。