JSON模板

JSON 模板允许您使用分区控制shopify网店不同页面的外观。

JSON 模板是一个数据文件，其中存储了要呈现的分区列表及其相关设置。商家可以使用主题编辑器添加、删除和重新排列这些分区。

使用 JSON 模板渲染页面时，各分区将按照 order 属性指定的顺序呈现，各分区之间没有标记。JSON 模板最多可渲染 25 个分区，每个分区最多可有 50 个块。

虽然 JSON 模板与 Liquid 模板在内容上有所不同，但它们仍然是模板文件，支持以下 Shopify 主题功能：

• 除 gift_card 和 robots.txt 外的所有模板类型。
• 备用模板。

创建 JSON 模板时，还应创建一个包含模板核心功能的分区。例如，在创建收藏列表 JSON 模板时，应引用使用collections object.的分区。

一个主题最多可包含 1,000 个 JSON 模板。达到上限后，就不能再创建新的 JSON 模板了。

Schema

JSON 模板必须是有效的 JSON 文件。根对象一般具有以下属性：

属性	类型	必填	描述
layout	String 或者 false	不是	在渲染模板时要使用的布局文件名。例如，指定 “full-width “可渲染 layout/full-width.liquid。 默认布局为 theme.liquid。 使用 false 值可渲染无布局的模板。没有布局的模板无法在主题编辑器中自定义。
wrapper	String	不是	模板分区的 HTML 封装元素。要了解更多信息，请参阅wrapper属性
sections	对象	是	将分区 ID 作为keys、分区数据作为值的对象。该属性需要至少包含一个分区。 模板内不允许有重复的 ID。 分区数据的格式与 settings_data.json 中的分区数据相同。要了解更多信息，请参阅分区数据。JSON 模板最多可呈现 25 个分区，每个分区最多可有 50 个块。
order	数组	是	按渲染顺序列出的分区 ID 数组。ID 必须存在于分区对象中。不允许重复。

命名 JSON 模板

文件名必须是有效的主题模板类型，可选择后缀作为备用模板。例如，产品模板可以命名为 product.json 或 product.alternate.json。

模板只能以 JSON 或 Liquid 模板的形式存在，不能同时存在。例如，如果 product.liquid 已经存在，则无法创建 product.json。

wrapper属性

有了 wrapper 属性，就可以在 JSON 模板的所有分区周围插入 HTML 标记。您可以使用以下 HTML 标记：

• <div>
• <main>
• <section>

例如，带有以下wrapper属性的 JSON 文件会产生以下输出：

{
  "wrapper": "div#div_id.div_class[attribute-one=value]",
  "sections": {
    "main": {
      "type": "product"
    }
  },
  "order": [
    "main"
  ]
}

输出

<div id="div_id" class="div_class" attribute-one="value">
    <!-- product.json sections -->
</div>

分区 data

JSON 模板的 sections 属性包含模板要呈现的分区的数据。这些分区可以是主题分区，也可以是应用程序分区。您不能在 JSON 主题模板中共享分区数据，因此每个分区都必须有一个在模板中唯一的 ID。

JSON 模板最多可以呈现 25 个分区，每个版块最多可以有 50 个块。

你可以通过代码或主题编辑器向模板添加分区。在主题编辑器中可添加到模板的分区可能会受到分区schema的 enabled_on 或 disabled_on 属性的限制。如果没有定义 enabled_on 或 disabled_on 属性，则该分区可以添加到任何模板中。

下表概述了分区数据的格式：

值	类型	必须	说明
<SectionID>	字符串	–	分区的唯一 ID。只接受字母数字字符
<SectionType>	字符串	是	要渲染的分区文件的文件名，不含扩展名
<SectionDisabled>	Boolean	否	为真时，不渲染该分区，但仍可在主题编辑器中自定义。默认为假。
<BlockID>	字符串	–	块的唯一 ID。只接受字母数字字符。
<BlockType>	字符串	是	要渲染的块的类型，在分区文件的schema中定义。
<BlockOrder>	数组	否	按渲染顺序排列的块 ID 数组。ID 必须存在于块对象中，不允许重复 ID
<SettingID>	字符串	–	在分区或块的schema中定义的设置 ID
<SettingValue>	多种	–	设置的有效值

例如

sections: {
  <SectionID>: {
    "type": <SectionType>,
    "disabled": <SectionDisabled>,
    "settings": {
      <SettingID>: <SettingValue>
    },
    "blocks": {
      <BlockID>: {
        "type": <BlockType>,
        "settings": {
          <SettingID>: <SettingValue>
        }
      }
    },
    "block_order": <BlockOrder>
  }
}

例如，以下模板会在产品页面上呈现 product.liquid 和 product-recommendations.liquid 分区文件：

{
  "sections": {
    "main": {
      "type": "product",
      "settings": {
        "show_vendor": true
      }
    },
    "recommendations": {
      "type": "product-recommendations"
    }
  },
  "order": [
    "main",
    "recommendations"
  ]
}

平台控制设置

在主题编辑器中，Shopify 在主题和分区级别提供了自定义 CSS 设置。商家添加到分区实例中的任何自定义 CSS 都会存储在分区数据的 custom_css 属性中。

该设置的目的是让用户无需编辑主题代码即可自定义店面的外观。作为主题开发人员，您不应该添加此设置，也不应该在设置后编辑此设置的值。相反，您应该使用专用的 CSS 资产和样式表Liquid标签，并通过主题设置在这些区域引入 CSS 自定义选项。

原文：https://shopify.dev/docs/themes/architecture/templates/json-templates#the-wrapper-property