概述

为了让主题设计能适配不同商家的需求，让不了解代码的商家可以通过图形界面自行调整店铺页面的样式，SHOPLINE 提供了主题编辑器让商家可以方便地使用主题中的配置项自行控制店面的样式。例如，商家可以利用主题中轮播图提供的配置项，上传或替换不同营销节日中的轮播图片。

schema

schema 是定义主题的全局控件配置、组件控件配置和区块控件配置的一套协议，可以供商家在主题编辑器中通过定义的控件来对主题进行设计。

你可以在以下对应的主题文件中添加 schema：

位置	描述
theme.schema.json	全局控件配置
sections 目录下的组件文件	组件控件配置
blocks 目录下的区块文件	区块控件配置

JSON 配置数据

JSON 配置数据是指商家通过主题编辑器控件配置的数据。这些配置的数据将会以 JSON 的形式存储在以下两个地方：

theme.config.json：存储全局控件配置的数据
templates/*.json：存储组件和区块控件配置的数据。具体存储的模板文件，取决于组件被添加到哪一个页面中。

访问配置项的值

在定义 schema 后，你需要在 HTML 代码中访问配置项的值。

根据创建位置的不同，需要使用不同的 sline 对象访问配置项的值。

要访问特定的配置项的值，需要将关联配置的 id 属性附加到你配置的访问对象上。

访问全局配置项的值

全局配置项只能在 theme.schema.json 文件中定义。

例如在 theme.schema.json 中定义以下 schema：

{
  ...
  schemas: [
    {
      "name": "Theme Title",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "My Theme Title"
        }
      ]
    }
  ]
}

然后可以在任意的 .html 文件中通过 settings object 方式进行访问，例如：

<!-- layout/theme.html -->
<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <div>{{ settings.title }}</div>
    ...
  </body>
</html>

输出：

<!-- layout/theme.html -->
<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <div>My Theme Title</div>
    ...
  </body>
</html>

访问组件配置项的值

组件配置项只能在组件的 .html 文件中定义。

例如在组件中的 schema tag 中定义以下 schema：

{{#schema}}
{
  "name": "Blog",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Blog title",
      "default": "My Blog Title"
    }
  ]
}
{{/schema}}

然后可以在组件中的 .html 文件中通过 section.settings object 进行访问，例如：

<!-- sections/blog/blog.html -->
<div>
  {{ section.settings.title }}
</div>
{{#schema}}
{
  "name": "Blog",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Blog title",
      "default": "My Blog Title"
    }
  ]
}
{{/schema}}

输出：

<!-- sections/blog/blog.html -->
<div>
  My Blog Title
</div>
{{#schema}}
{
  "name": "Blog",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Blog title",
      "default": "My Blog Title"
    }
  ]
}
{{/schema}}

注意：section object 只能在组件文件中访问。

访问区块配置项的值

区块配置项只能在区块的 .html 文件中定义。

例如在区块中的 schema tag 进行定义：

<!-- blocks/button.html -->
{{#schema}}
{
  "name": "Button",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Button",
      "default": "confirm"
    }
  ]
}
{{/schema}}

然后可以在区块中的 .html 文件中通过 block.settings object 进行访问，例如：

<!-- blocks/button.html -->
<button>{{ block.settings.text }}</button>
{{#schema}}
{
  "name": "Button",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Button",
      "default": "confirm"
    }
  ]
}
{{/schema}}

输出：

<!-- blocks/button.html -->
<button>confirm</button>
{{#schema}}
{
  "name": "Button",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Button",
      "default": "confirm"
    }
  ]
}
{{/schema}}