- 开始使用
- 功能组件
- 附加组件
- 教程
- 如何定制
- 布局示例
- 项目结构
- 使用 Less & Sass
- 创建主题
- 创建样式
- Customizer.json 变量
- JavaScript 示例
- 自定义前缀
- 基础
- 打印组件
- 网格组件
- 面板
- 块
- 文章
- 评论
- 效果
- Flex 布局
- 覆盖
- 导航菜单
- 导航栏
- 二级导航
- 面包屑
- 分页
- 选项卡
- 缩略图导航
- 列表
- 描述列表
- 表格组件
- 表单
- 按钮组件
- 图标
- 关闭
- 徽章
- 提示框组件
- 缩略图
- 遮罩
- 文本
- 列
- 动画组件
- 对比度
- 下拉菜单
- 模态对话框
- 抽屉
- 切换器
- 拨动组件
- 滚动监听
- 平滑滚动
- 动态网格
- 视差网格
- 圆点导航
- 滑动导航
- 动态分页
- 高级表单
- 文件表单
- 密码表单
- 选择表单
- 占位符
- 进度条
- 灯箱
- 自动完成
- 日期选择器
- HTML 编辑器
- 滚动条
- 滑块集
- 幻灯片
- 视差
- 手风琴
- 通知
- 搜索
- 可嵌套
- 可排序
- 附着
- 时间选择器
- 工具提示
- 上传
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-*"
]
},
]}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论