> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperframes-zh.cn/llms.txt
> Use this file to discover all available pages before exploring further.
# 变量
> 参数化组合，以便同一源可以呈现不同的内容。
变量让您可以在合成中声明命名的、类型化的槽，并在渲染时填充它们——从父合成、CLI 或 API 调用。采用 `title` 和 `color` 的卡片组合可以使用一百种不同的值嵌入一百次，而无需复制任何 HTML。
## 声明变量
将 `data-composition-variables` 添加到任何组合的 `` 根。它的值是一个变量声明的 JSON 数组——每个变量一个对象：
```html compositions/card.html theme={null}
```
每个声明都需要四个字段：`id`、`type`、`label` 和 `default`。 `id` 在组合中必须是唯一的。
## 变量类型
| 类型 | `default` 值 | 额外选项 |
| --------- | ---------------- | ------------------------------------------------------------- |
| `string` | `"some text"` | `placeholder?: string`、`maxLength?: number` |
| `number` | `0` | `min?: number`、`max?: number`、`step?: number`、`unit?: string` |
| `color` | `"#rrggbb"` | — |
| `boolean` | `true` / `false` | — |
| `enum` | 选项值之一 | `options: [{value: string, label: string}]` |
Studio 编辑 UI 使用 `label`、`type` 和特定于类型的选项来为每个变量呈现正确的输入小部件。
## 什么可以是变量
变量分为两层。上面的五个[声明类型](#variable-types)涵盖了类型化的原始数据——字符串、数字、颜色、布尔值、枚举。对于其他一切，保存 URL 的 `string` 变量是逃生舱口：您的组合读取 URL 并将其分配给任何需要它的 DOM 元素。
### 参数化媒体资产
只需通过字符串变量交换 URL，相同的组合就可以呈现不同的图像、视频剪辑或音轨：
```html compositions/product-card.html theme={null}
```
运行时在合成脚本运行后探测 DOM，因此会发现运行时从变量分配的 `
相同的模式涵盖三种媒体元素类型：
* **`![]()
`** — 从字符串变量分配。 Chrome 在捕获过程中像任何其他图像一样获取它；没有额外的配置。
* **`