# 主题中的 App block

> 让 Shoplazza 主题的 section 支持 app block：在 section schema 里加通用 @app 块并渲染应用内容，商家无需改 theme 代码。

如果您的 section 属于 [Liquid template](/docs/theme/architecture/templates/liquid-templates)，则应支持 `@app` 类型的 block。这些 block 允许应用开发者创建 block，让商家无需直接编辑 theme 代码即可将应用内容添加到 theme 中。

:::note
`@app` 类型的 block 不支持在[静态渲染的 section](/docs/theme/architecture/sections/overview#静态渲染-section) 中使用。
:::

要支持 app block，您需要完成以下三件事：

* [在 section 中添加对 app block 的支持](./app-blocks-for-themes#在-section-中支持-app-block)
* [渲染 block 内容](./app-blocks-for-themes#渲染-app-block)

## 在 section 中支持 app block

要允许商家向 section 添加 app block，您需要在 section schema 中包含一个 `@app` 类型的通用 block。例如：

```json title="代码"
"blocks": [
  {
    "type": "@app"
  }
]
```

:::warning
`@app` 类型的 block 不接受 `limit` 参数，包含该参数将导致错误。
:::

## 渲染 app block

要渲染 app block，您需要检查相应类型，并使用以下代码：

```liquid title="代码"
{% render block %}
```

例如：

```liquid title="代码"
{% for block in section.blocks %}
  {% if block.type contains 'shoplazza://apps' %}
    {% render block %}
    ...
  {% endif %}
{% endfor %}
```

## App block 容器

App block 可以通过两种方式添加到页面：

* 作为渲染该 block 的 section 范围内的 block
* 类似于 section 的方式，占据页面全宽来渲染内容

由于 app block 本身不是 section，Shoplazza 默认会将这些全宽 app block 包裹在一个平台生成的 section 中。但您可以通过创建名为 `apps.liquid` 的 section 来覆盖该默认 section。

`apps.liquid` section schema 需要包含一个 `@app` 类型的 block 以及一个 preset。如果其中任一缺失，则主题编辑器中将返回"不支持应用"或"应用 section 无效"的错误，商家将无法使用该 section。

:::warning
`apps.liquid` section schema 不能包含 `templates` schema 属性。该 section 默认应在所有 template 上可用。
:::

例如：

```liquid title="/sections/app.liquid"
{% for block in section.blocks %}
  {% render block %}
{% endfor %}

{% schema %}
{
  "name": "apps",
  "max_blocks": 16,
  "settings": [],
  "blocks": [
    {
      "type": "@app"
    }
  ],
  "presets": [
    {
      "name": "apps",
      "cname": {
        "en-US": "Apps",
        "zh-CN": "应用"
      },
      "category": {
        "en-US": "Apps",
        "zh-CN": "应用"
      },
      "display": true,
      "blocks": []
    }
  ]
}
{% endschema %}
```

要让商家能够控制应用在 app section 内的外观，您可以添加一个允许商家在 app block 周围添加边距的设置，使 app section 的边距与 theme 布局保持一致。

```liquid title="/sections/app.liquid"
<div class="{% if section.settings.page_width %}page-container{% endif %}">
  {% for block in section.blocks %}
    {% render block %}
  {% endfor %}
</div>

{% schema %}
{
  "name": "apps",
  "max_blocks": 16,
  "settings": [
    {
      "type": "checkbox",
      "id": "page_width",
      "label": {
        "en-US": "Make section margins the same as theme",
        "zh-CN": "使分区页边距与模板相同"
      },
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "@app"
    }
  ],
  "presets": [
    {
      "name": "apps",
      "cname": {
        "en-US": "Apps",
        "zh-CN": "应用"
      },
      "category": {
        "en-US": "Apps",
        "zh-CN": "应用"
      },
      "display": true,
      "blocks": []
    }
  ]
}
{% endschema %}
```

:::note
`apps.liquid` section 不是标准的 theme section。它无法手动渲染，即您无法使用 `{% section 'apps' %}` 来引入它，商家也无法在主题编辑器中将其添加到页面。
:::