schema
schema是一个json配置结构，商家端后台模版装修，全局配置和卡片配置项，都是根据schema的配置来进行渲染的，也就是说，schema主要的作用是：商家端后台的模版装修
对于模版开发，除了前台商城的页面内容需要html，css，js等代码的编写，还需要后台进行模版装修， 后台模版装修就需要有各种配置项：全局配置项，卡片配置项等，配置项的实现是通过schema来实现的
schema
schema，是为了后台模版装修，对配置项结构进行定义，目前在2个地方存在schema：
全局配置：config/settings_schema.json卡片配置：sections文件夹，装修卡片文件
schema简介
1.全局配置
打开文件：config/settings_schema.json，可以看到里面的配置项，里面一个json结构，里面是一个对象数组
- 每一个对象数组，是一个
配置组，每一个配置组里面, 有配置组的名称（name），以及多个配置项（settings） - settings是一个对象数组，每一个对象子项，就是一个
配置项
[
{
"name": { // ## `配置组-名称`
"text": "通用设置",
"lang_params": {
"en": "General settings",
"tw": "通用設定"
}
},
"settings": [ // ## `配置组-多个配置项`
{ // ## `配置项`
"type": "header", // ## `配置项-类型`
"content": { // ## `配置项-名称`
"text": "网站图标",
"lang_params": {
"en": "Favicon",
"tw": "網站圖標"
}
}
},
{ // ## `配置项`
"type": "checkbox", // ## `配置项-类型`
"id": "use_favicon", // ## `配置项-id，唯一标识，用来保存值（作为key）`
"label": { // ## `配置项-名称`
"text": "使用网站图标 (32px x 32px)",
"lang_params": {
"en": "Use favicon icon (32px x 32px)",
"tw": "使用網站圖標 (32px x 32px)"
}
},
"default": true // ## `配置项-默认值`
},
...
]
}
]
通过上面对json内容的拆解，可以明白在全局配置里面的配置项的作用，更多关于全局配置，参看：config-全局配置
2.卡片配置
在sections文件夹里面，每一个文件，都是一个装修卡片，譬如：视频装修卡片：sections/video.liquid
- 找到
schema标签，{% schema %}和{% endschema %}里面的内容，就是schema的配置
{% schema %}
{
"name": {
"text": "视频",
"lang_params": {
"en": "Video",
"tw": "視頻"
}
},
"disabled_on": {
"groups": [
"header",
"footer"
]
},
"settings": [
...
]
}
{% endschema %}
这里就是卡片的schema配置, 更多详细参看：sections-装修卡片
schema结构
上面从宏观方面进行了大致的介绍，本文详细介绍的是schema的结构,下面是sections/video.liquid文件，schema里面的一段配置代码
[
{
"type": "paragraph",
"content": {
"text": "[观看教程](https://xxx.link/xxx)",
"lang_params": {
"en": "[Watch tutorial](https://xxx.link/xxx)",
"tw": "[觀看教程](https://xxx.link/xxx)"
}
}
},
{
"type": "select",
"id": "container",
"label": {
"text": "容器类型",
"lang_params": {
"en": "Container type",
"tw": "容器類型"
}
},
"default": "w-full",
"options": [
{
"value": "container-fluid",
"label": {
"text": "默认",
"lang_params": {
"en": "Default",
"tw": "默認"
}
}
},
{
"value": "w-full",
"label": {
"text": "全宽",
"lang_params": {
"en": "Full width",
"tw": "全寬"
}
}
},
{
"value": "container",
"label": {
"text": "使用容器框",
"lang_params": {
"en": "Use container box",
"tw": "使用容器框"
}
}
}
]
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": {
"text": "配色方案",
"lang_params": {
"en": "Color scheme",
"tw": "配色方案"
}
}
},
{
"type": "header",
"content": {
"text": "视频设置",
"lang_params": {
"en": "Video settings",
"tw": "視頻設置"
}
}
},
{
"type": "select",
"id": "video_type",
"label": {
"text": "视频类型",
"lang_params": {
"en": "Video type",
"tw": "視頻類型"
}
},
"default": "fecify",
"options": [
{
"value": "fecify",
"label": {
"text": "上传视频",
"lang_params": {
"en": "Upload video",
"tw": "上传视频"
}
}
},
{
"value": "external",
"label": {
"text": "外部视频",
"lang_params": {
"en": "External",
"tw": "外部視頻"
}
}
}
]
},
{
"type": "video_url",
"id": "video_link",
"label": {
"text": "视频链接",
"lang_params": {
"en": "Video link",
"tw": "視頻鏈接"
}
},
"accept": [
"youtube",
"vimeo"
],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"info": {
"text": "接受YouTube或Vimeo链接",
"lang_params": {
"en": "Accepts YouTube or Vimeo links",
"tw": "接受YouTube或Vimeo鏈接"
}
}
},
]
sections文件夹，下面每个卡片的schema配置，在模版装修都可以看到每个子项，进行渲染的内容
- 每个配置子项，都是为了模版装修，渲染配置项
通过上面的截图，我们可以更清晰的了解到，schema就是为了商家端后台模版装修，进行渲染UI而进行的定义
通过上面的代码，我们可以了解schema的结构
type: 配置项-类型，不同的类型，显示不同的配置内容，譬如：checkbox是开关类型，select是下拉条类型，color_scheme是配色方案id：schema的id，唯一标识。用户保存值，就需要使用id作为保存值的key，通过id进行对应label：配置项的名称default：配置项的默认值info：配置项的备注
Type是配置项类型，fecify支持的type非常多，更多详细参看：