快速入门

学习如何构建一个基础主题区块并将其添加到一个区域和其他区块文件中。

主题区块是在主题级别定义的区块。与 在区域中定义的区块 不同，主题区块可以在主题的不同区域中重复使用。此外，主题区块可以嵌套在其他主题区块中以创建层级关系。

创建主题区块

完成本教程后，你应该会有一个可以在主题的不同区域和区块中重复使用的文本区块。你将把它添加到一个自定义区域和一个组区块中。

添加一个 blocks 文件夹

主题区块是 Liquid 文件，定义在主题的 blocks 目录中。要创建主题区块，请在主题的 /blocks 文件夹中添加一个 Liquid 文件。

如果你的主题还没有 /blocks 文件夹，则在主题根目录添加一个。在 /blocks 文件夹中添加一个 text.liquid 文件。

编写标记内容

主题区块文件包含标记内容。

标记内容是任何你想包含在区块中的 HTML 或 Liquid 内容。

编写 schema

主题区块文件包含一个 schema。

schema 是 {% schema %} Liquid 标签，用于配置区块的设置和属性。学习如何编写区块 schema。

提示
在此步骤中，你可以通过 区块目标 在区域文件中引用主题区块。为了让这个区块在主题编辑器的区块选择器中显示，你需要 添加一个区块预设。

在区块中使用 Liquid 对象

区块使用几个关键的 Liquid 对象：

  • 主题区块引用 block 对象，其中包含区块的属性和设置值。
  • 主题区块可以引用渲染主题区块的区域的 section 对象。
  • 主题区块可以访问 全局对象。

在本示例的文本区块中，该区块引用了 block 对象的设置属性。

主题区块无法访问区块外部定义的变量，也无法像使用 片段 一样传递变量。

添加区块预设

为了让主题区块在主题编辑器的区块选择器中对商家可用，预设 需要被定义。你可以为同一个主题区块编写多个预设。

在此示例中，文本主题区块有两个名为 Text 和 Content 的预设。 

  1. "presets": [  
  2.   { "name": "Text" },  
  3.   {  
  4.     "name": "Content",  
  5.     "settings": {  
  6.       "text": "Hello, World!"  
  7.     }  
  8.   }  
  9. ]

在区域中使用主题区块

在主题中定义主题区块后，需要更新主题的区域以渲染区块。

提示
区域可以 本地定义区块 或选择支持主题区块，但不能同时支持两者。

在 Liquid 中渲染区块

使用以下代码在 Liquid 中渲染区块： 

  1.   {% content_for 'blocks' %}

更新区域 schema

要让区域接受所有主题区块，请在该区域的 schema 的 blocks 属性 中添加类型 @theme。如果希望限制特定区域中可用的区块类型，请使用 区块目标。 

  1.   "blocks": [{ "type": "@theme" }, { "type": "@app" }],

在主题区块中嵌套区块

主题区块可以接受其他主题区块和应用区块作为子区块。

主题区块通过其 schema 的 blocks 属性 接受子区块，并通过 presets 属性 组合这些子区块的不同配置。

在此示例中，组区块有一个名为 Column 的预设，该预设通过 presets 属性嵌套了文本区块。 

  1.   {  
  2.   "name": "Column",  
  3.   "settings": {  
  4.     "color_scheme": "scheme-3"  
  5.   },  
  6.   "blocks": [  
  7.     {  
  8.       "type": "text",  
  9.       "settings": {  
  10.         "text": "<h3>Hello, world!</h3>"  
  11.       }  
  12.     },  
  13.     {  
  14.       "type": "text",  
  15.       "settings": {  
  16.         "text": "<p>How's it going?<\/p>"  
  17.       }  
  18.     }  
  19.   ]  
  20. }

每个区块的内容通过以下 Liquid 标签渲染： 

  1.   {% content_for 'blocks' %}

内容的渲染顺序与 JSON 模板 中存储的顺序一致。这是与区域用于区块的相同渲染机制。

提示
区块预设可以引用主题中的其他主题区块。此示例引用了本教程早期创建的 /blocks/text.liquid Liquid 文件。了解更多关于 主题区块预设 的内容。