Customizer.json
最后更新于：2022-04-01 22:20:55
# Customizer.json
这个文件用于定义你的主题外观中的控件数量。
每个主题都有其特定的 `customizer.json`。它定义了哪些变量是默认显示的，哪些变量仅在高级模式中显示。这个文件分为 _controls_ 和 _groups_两部分。
* * *
## Controls/控件
控件（controls）用于定义如何在定制工具中显示变量。默认情况下，所有的变量都显示在输入框（input）元素中。你可以使用以下类型（type）来改变默认的输入框。
| Type | 描述 |
| --- | --- |
| `"type": "color"` | 将含有色彩数值的输入框转变为易用的色彩选择器。 |
| `"type": "select"` | 使用这种类型得到一个选择框，替代输入框。 |
| `"type": "font"` | 将会转变成带类似url的附加选项的选择框或选择框组。 |
### Variables/变量
选择了输入框的类型后，你还须定义哪些变量会相互影响。你可以使用特定的单个变量或者使用通配符 `*` 来选择一组，而不是一个一个地单独设置每个变量。
### 特定变量
只影响 `@global-border` 和 `@global-light-border`。
```
{
"vars": [
"@global-border",
"@global-light-border"
]
}
```
### 通配符变量
影响所有以 `-color` 和 `-background`结尾的变量。
```
{
"vars": [
"*-color",
"*-background"
]
}
```
### 颜色选择器
通过设置 `"type": "color"` 将下面的示例中所有以 `-color` 或 `-background` 结尾的变量变成一个简单易用的颜色选择器，需要注意的是变量的值必须是一个颜色值。
### Example
```
{"controls": [
{
"type": "color",
"vars": [
"*-color",
"*-background"
]
}
]}
```
### 选择元素
如果一个变量只能使用特定的值，你可以通过使用 `"type": "select"` 轻松地将输入元素变成一个选择元素，并加入可选择的选项。
### Example
```
{"controls": [
{
"type": "select",
"vars": [
"*-weight"
],
"options": [
{"name": "Normal", "value": "normal"},
{"name": "Bold", "value": "bold"}
]
}
]}
```
### 字体
当涉及到字体时，你可以使用上面介绍的“选择元素”方法或通过设置 `"type": "font"` 来创建一个字体选择框，你可以添加一些值，比如一个字体 _url_ 或者将你的字体分成几组。
### Example
```
{"controls": [
{
"type": "font",
"vars": [
"*-font-family"
],
"options": {
"System Fonts": [
{"name": "Arial", "value": "\"Helvetica Neue\", Helvetica, Arial, sans-serif"},
{"name": "Consolas", "value": "Consolas, monospace, serif"}
],
"Google Fonts": [
{"name": "Abel", "value": "'Abel'", "url":"http://fonts.googleapis.com/css?family=Abel"},
{"name": "Asul", "value": "'Asul'", "url":"http://fonts.googleapis.com/css?family=Asul"},
}
}
]}
```
* * *
## Groups/组
组（groups）定义了哪些变量应该显示在定制器的侧边栏中。你可以把一些相关的变量组合到一起放在一个组中，显示在一个标题下，或者在 _Advanced Mode(高级模式)_中显示。
### Example
这两个变量的设置将被默认显示在定制器的侧边栏中。
```
{"groups": [
{
"label": "Backgrounds",
"vars": [
"@global-background",
"@global-dark-background"
]
}
]}
```
在高级模式中显示导航栏组件的所有变量。
```
{"groups": [
{
"label": "Navbar",
"advanced": true,
"vars": [
"@navbar-*"
]
},
]}
```
';