# 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-*" ] }, ]} ```