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