静态 Block

Static theme blocks 使主题开发者能够对其块和区块的布局拥有更多控制权。它们被称为静态主题块，因为它们在 Liquid 中是静态渲染的，而不是动态渲染的。静态主题块可以在各种场景中使用：

  • 在主题设计需要商户无法移动或删除主题块的情况下，为主题提供结构。
  • 条件渲染主题块。

在所有情况下，静态块都保留了自定义设置的灵活性。

静态渲染 vs 动态渲染的主题块

你可以通过以下方式在区块或另一个主题块中渲染主题块：

  • 使用 {% content_for 'blocks' %} 在 Liquid 中动态渲染。
  • 在 Liquid 中静态渲染，通过显式设置 type 使用 {% content_for “block”, type: “<type>”, id: “<id>” %}。
静态块 动态渲染的块
可以隐藏和自定义 可以隐藏和自定义
不能重新排序（拖放） 可以重新排序（拖放）
不能删除或复制 可以删除或复制
可以在条件语句或 for 循环中渲染 不能在条件语句或 for 循环中渲染
如果未作为块预设的一部分添加，仍会被解析 必须包含在块预设中才能作为预设的一部分添加
不计入 max_blocks 限制 计入 max_blocks 限制

渲染静态块

要在区块或块文件中静态渲染主题块，必须使用以下 Liquid 标签： 

  1. {% content_for "block", type: "type", id: "id" %}
参数 定义
type 主题 /blocks 文件夹中现有主题块的类型（名称）。
id 必填。在包含静态块的区块或块中，唯一标识符及其关联的字符串字面量。ID 可以是任何描述性标识符，用于在预设和模板中引用静态主题块。由于同一类型可能存在多个静态块，因此需要 ID。Shopify 不会为静态块生成 ID，因此主题开发者必须在 Liquid 中手动设置静态 ID。

注意

与这一功能一同更新的是块的唯一 ID 约束。块 ID 不再需要对根区块唯一，只需对其直接父级唯一。这意味着主题开发者无需担心静态块在区块中的使用位置或次数。

向静态块传递数据

与主题块一样，静态块也可以访问来自区块和块的动态源数据。通过静态块，你还可以传递任意数据。例如，幻灯片区块可以将颜色传递给幻灯片块： 

  1. {% content_for "block", id: "slide-1", type: "slide", color: "#111" %}

从幻灯片块中，可以通过引用相同的关键词访问数据： 

  1. <h2 style="color: {{ color | default: "green" }}">  
  2.   Shopify  
  3. </h2>

条件渲染

当静态块在 Liquid 的条件语句中渲染时，它被视为条件渲染。Shopify 会检测到静态块的条件渲染，并在主题编辑器侧边栏中显示视觉提示（虚线眼睛图标），以提升用户体验。 

  1. <div id="slideshow-{{ section.id }}">  
  2.   <div class="slideshow__slides">  
  3.     {% content_for "blocks" %}  
  4.   </div>  
  6.   {% if section.blocks.size > 1 %}  
  7.     {% content_for "block", type: "_slideshow-controls", id: "static-slideshow-controls" %}  
  8.   {% endif %}  
  9. </div>  
  11. {% schema %}  
  12.   {  
  13.     "name": "Slideshow",  
  14.     "class": "section--group",  
  15.     "blocks": [{ "type": "_slide" }, { "type": "_slideshow-controls" }]  
  16.   }  
  17. {% endschema %}

预设中的静态主题块

你可以选择在主题块预设中包含静态块以覆盖设置值。静态块预设需要两个额外的键：

  1. id: 来自 Liquid 的静态块 ID
  2. static: true: 表示该块是静态的

注意

如果区块或块包含静态块但未在预设中明确包含它们，静态块将始终与容器区块或块预设一起添加，并使用默认设置值。

以下示例通过静态块渲染可折叠行的摘要和图标。摘要和图标是静态块，因为它们与行有固定关系。每一行应始终在顶层包含图标和摘要，因此商户不应能够删除它们或重新排序。

在此示例中，静态块是在块预设中编写的： 

  1. {% content_for "block", type: "collapsible-row-summary", id: "collapsible-row" %}  
  3. <div>  
  4.   {% content_for "blocks" %}  
  5. </div>  
  7. {% schema %}  
  8. {  
  9.   "name": "Collapsible row",  
  10.   "tag": "details",  
  11.   "class": "details",  
  12.   "blocks": [{ "type": "@theme" }, { "type": "@app" }],  
  13.   "settings": [],  
  14.   "presets": [  
  15.     {  
  16.       "name": "Collapsible row",  
  17.       "blocks": [  
  18.         {  
  19.           "type": "collapsible-row-summary",  
  20.           "static": true,  
  21.           "id": "collapsible-row",  
  22.           "blocks": [  
  23.             {  
  24.               "type": "icon",  
  25.               "id": "collapsible-row-icon",  
  26.               "static": true,  
  27.               "settings": {  
  28.                 "icon": "check_mark",  
  29.                 "size": {  
  30.                   "width": "22px"  
  31.                 }  
  32.               }  
  33.             }  
  34.           ]  
  35.         },  
  36.         {  
  37.           "type": "group",  
  38.           "blocks": [  
  39.             {  
  40.               "type": "heading"  
  41.             },  
  42.             {  
  43.               "type": "text"  
  44.             }  
  45.           ]  
  46.         }  
  47.       ]  
  48.     }  
  49.   ]  
  50. }  
  51. {% endschema %}

上述代码将在编辑器中渲染一个可折叠行，包含静态渲染的图标和摘要：

数据中的静态主题块

静态主题块会持久化在 JSON 数据中。关于 JSON 数据中的静态块，需要注意两个关键点：

  1. static: true 标志表明哪些块是静态渲染的。
  2. 静态块 ID 不会包含在 block_order 数组中，因为商户无法重新排序静态块。Shopify 会根据静态块在 Liquid 代码中的排列顺序（相对于动态块）确定其顺序，并在主题编辑器侧边栏和渲染页面中相应显示。

以下代码片段来自一个模板 JSON 文件。collapsible-row-summary 和 collapsible-row-icon 块具有 static: true 标志。它们未包含在 block_order 数组中。 

  1. {  
  2.   "sections": {  
  3.    "custom_section": {  
  4.      "type": "custom-section",  
  5.      "blocks": {  
  6.        "collapsible_row": {  
  7.          "type": "collapsible-row",  
  8.          "settings": {},  
  9.          "blocks": {  
  10.            "collapsible-row-summary": {  
  11.              "type": "collapsible-row-summary",  
  12.              "static": true,  
  13.              "settings": {  
  14.                "summary": "Collapsible row"  
  15.              },  
  16.              "blocks": {  
  17.                "collapsible-row-icon": {  
  18.                   "type": "icon",  
  19.                   "static": true,  
  20.                   "settings": {  
  21.                   "icon": "check_mark",  
  22.                   "size": {  
  23.                     "width": "22px"  
  24.                   }  
  25.                 }  
  26.                }  
  27.              },  
  28.              "block_order": []  
  29.            }  
  30.          },  
  31.          "block_order": []  
  32.        }  
  33.       },  
  34.       "block_order": ["collapsible_row"],  
  35.       "settings": {  
  36.         "direction": "column",  
  37.         "justify_content": "flex-start",  
  38.         "full_width": false  
  39.       }  
  40.    }  
  41.   },  
  42.   "order": ["custom_section"]  
  43. }