主题的应用块

如果您的部分是 JSON 模板的一部分，那么您应该支持@app类型的块。这些块使应用程序开发人员能够为商家创建块，将应用程序内容添加到其主题，而无需直接编辑主题代码。您可以使用主题应用程序扩展来构建应用程序块。

要支持应用程序块，您需要做三件事：

• 在分区中添加对应用程序块的支持
• 渲染块内容
• 确保有有效的分区设置

此外，您还可以创建一个应用程序块包装分区。
有关实现示例，请参阅 Dawn 的主要产品分区。

在分区中支持应用程序块

要允许商家在分区中添加应用程序块，需要在版块模式中包含一个 @app 类型的通用块。例如

"blocks": [
  {
    "type": "@app"
  }
]

渲染应用程序块

要渲染应用程序块，您需要检查适当的类型，并使用以下代码：

{% render block %}

例如

{% for block in section.blocks %}
  {% case block.type %}
    {% when '@app' %}
      {% render block %}
    ...
  {% endcase %}
{% endfor %}

应用程序块和分区设置

为防止自动填写设置产生歧义，支持应用程序块的分区只能将每种类型的一个资源设置作为分区设置。例如，一个部分可能只包含一个产品设置和一个产品系列设置

应用程序块包装

可以通过两种方式将应用程序块添加到页面中：

• 在渲染区块的版块范围内作为一个块
• 以与分区类似的方式，在页面全宽范围内呈现内容

由于应用程序块本身不是分区，Shopify 默认将这些全宽度的应用程序块封装在平台生成的分区中。不过，您可以通过创建自己的 apps.liquid 版块来覆盖默认分区。

apps.liquid 分区schema需要包含一个 @app 类型的块和一个预设。如果缺少其中任何一个，主题编辑器就会返回 “不支持应用程序 “或 “应用程序分区无效 “的错误信息，商家将无法使用该分区。

例如

{% for block in section.blocks %}
  {% render block %}
{% endfor %}

{% schema %}
  {
    "name": "App wrapper",
    "settings": [],
    "blocks": [
      {
        "type": "@app"
      }
    ],
    "presets": [
      {
        "name": "App wrapper"
      }
    ]
  }
{% endschema %}

为了让商家能够控制应用程序在应用程序区块内的外观，您可以添加一个设置，让商家在应用程序块周围添加边距。这有助于使应用程序分区的边距与主题布局保持一致。

<div class="{% if section.settings.include_padding %}padded{% endif %}">
  {% for block in section.blocks %}
    {% render block %}
  {% endfor %}
</div>

{% schema %}
  {
    "name": "App wrapper",
    "settings": [
      {
        "type": "checkbox",
        "id": "include_padding",
        "default": true,
        "label": "Make section margins the same as theme"
      }
    ],
    "blocks": [
      {
        "type": "@app"
      }
    ],
    "presets": [
      {
        "name": "App wrapper"
      }
    ]
  }
{% endschema %}