theme.schema.json

theme.schema.json 是主题的全局配置定义及信息存储文件,位于项目根目录,用于定义:

  • 主题信息:名称、版本、作者、支持链接等。
  • 全局配置项:商家在可视化编辑器中可配置的表单项(如颜色、字体)。

主题信息定义

主题基本信息涵盖主题名称、版本号、作者等,这些信息会被运用在 主题官方商城、可视化编辑器、SHOPLINE 商家后台 等地方,让商家可以方便了解相关信息。

数据结构

以下是主题 Bottle 的主题信息示例:

// theme.schema.json
{
"theme_name": "Bottle", // 主题名称
"theme_version": "1.0.0", // 主题版本号
"theme_author": "SHOPLINE", // 主题作者
"theme_documentation_url": "https://themes.shopline.com/themes/Bottle/styles/Default", // 主题介绍地址
"theme_support_url": "https://help.shopline.com/", // 帮助中心链接
"theme_type_version": "OS_3.0", // 渲染引擎版本
"schemas": [...]
}

字段说明

字段描述示例
theme_name主题名称"Bottle"
theme_version主题版本号"1.0.0"
theme_author主题作者"SHOPLINE"
theme_documentation_url主题文档地址"https://themes.shopline.com/themes/Bottle/styles/Default"
theme_support_url帮助中心链接"https://help.shopline.com/"
theme_type_version渲染引擎版本"OS_3.0"

全局配置项定义

主题全局配置是主题的公共配置,一般会把主题的通用配置定义在全局配置中,例如以下几种场景:

  • 字体:定义所有页面使用的字体。
  • 输入框:定义所有页面输入框样式。
  • 加购方式:定义所有加购跳转的交互方式。

所有的页面模板、组件、区块都可以通过 settings object 访问全局配置数据。

数据结构

以下是主题 Bottle 的全局配置项定义部分示例,它们存储在 schemas 字段里:

// theme.schema.json
{
...
"schemas": [ // 配置项集合
{
"name": "Color", // 配置分类名称
"settings": [ // 配置项列表
{
"type": "color", // 配置项控件类型
"label": "Sale", // 配置项标签
"id": "color_sale", // 配置项唯一标识
"default": "#3D3819" // 配置默认值
}
]
},
{
"name": "Font",
"settings": [
{
"type": "font",
"label": "Font",
"id": "title_font",
"default": "Brygada 1918:700"
}
]
}
]
}

字段说明

字段描述示例值
schemas配置项分类集合如上所示
name配置分类名称"Color"
settings配置项列表如上所示
type配置项控件 类型(如 color、font)"color"
label配置项标签"Sale"
id配置项唯一标识"color_sale"
default配置项默认值"#3D3819"

应用场景示例

以下是主题 Bottle 在编辑器中的全局配置界面截图:

这篇文章对你有帮助吗?