返回介绍

Customizer.json 变量

发布于 2019-05-26 16:28:17 字数 2813 浏览 1066 评论 0 收藏 0

这个文件用于定义你的主题外观中的控件数量。

每个主题都有其特定的 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-*"
]
    },
]}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文