Blocks（区块）

Overview（概览）

Blocks 让开发者可以通过把页面分成更小、更可复用的 Liquid 片段，来构建更灵活的页面布局。每个 block 都有自己的一组设置，可以在 section 里被添加、删除和重新排序。

主题中的 block 还可以嵌套其他 block 当作子元素。

Block 一共有三种类型：

• Theme blocks：在 /blocks 文件夹中以独立的 Liquid 文件形式创建，可以在多个 section 中复用。
• Section blocks：直接写在 section 的 Liquid 文件里，只能在该 section 内使用。
• App blocks：由商店安装的 App 提供。

Theme blocks（主题区块）

Theme blocks 在构建 section 时提供了最多的灵活性。作为开发者，你可以：

• 允许商家添加任意可用的 block
• 限制某些 section 只能用特定类型的 block
• 支持 block 嵌套在其他 block 里面
• 创建“Static blocks（静态区块）”，这些 block 会固定在父 block 或父 section 的某个位置。（注意，Static blocks 可以被商家隐藏，但不能被删除）

举个例子，假设你在做一个幻灯片（slideshow）section，你可以：

• 限制它只能添加 Slide block
• 允许每个 Slide block 里包含其他任意可用的 block，无论是主题内置的还是 App 提供的
• 添加一个静态的 “Slideshow Controls” block，让它一直固定在原位

这样既能让商家自由定制幻灯片内容，又能保持导航控件的一致性。

想了解更多细节，可以看这里：如何在主题中使用 Theme blocks。

Section blocks（Section 区块）

Section blocks 有一些限制：

• 只能在定义它的那个 section 里使用，不能在别的地方复用
• 只支持单层结构，不能嵌套
• 当前不能和 Theme blocks 一起使用在同一个 section 里

Section blocks 是直接写在 section 的 Liquid 文件中的，通过 section 的 {% schema %} 标签来配置。

更多内容参考：如何在 section 中本地定义 blocks。

App blocks（应用区块）

App blocks 让商家可以把 App 的功能（比如评论、评分或自定义表单）添加到主题里。它们是由商店安装的 Shopify App 定义的。App blocks 可以添加到任何支持它们的 section 或 Theme block 中。比如我们刚才讲的 Slideshow 示例，如果你有一个 /blocks/slide.liquid，想让它支持 App block，只需要这样写：

{% schema %}
{
  "name": "Slide",
  "blocks": [{ "type": "@theme" }, { "type": "@app" }],
  // 后面的 Schema 配置

想了解更多，可以看：如何让你的主题支持 App blocks。

Theme blocks vs Snippets（主题区块 vs 片段）

如果你不熟悉 snippets，可以先看这里：Snippets 入门。

Theme blocks 和 snippets 都能让你复用代码，但用途不一样。

Theme blocks：

• 会在 theme editor（主题编辑器）里显示设置
• 每个实例都能被商家单独定制
• 可以访问父 section 和全局对象
• 不能 从父级代码中接收变量

Snippets：

• 处理可复用的 HTML 模板，但不能给商家定制
• 可以 从父级代码里接收变量
• 不会在主题编辑器中显示

很多时候你会把两者配合使用。比如一个商品卡片可能会用到：

• Theme blocks 来构建结构和设置项
• Snippets 来处理一些重复使用的 HTML 模板和逻辑