Shopify 主题中的块(blocks)

块(Blocks)概念

Shopify 中的块允许开发者通过将部分(sections)分解为更小、可重用的 Liquid 代码片段来创建灵活的布局。每个块都有自己的设置集，可以在部分内添加、删除和重新排序。

Shopify 有三种类型的块：

主题块(Theme blocks): 在 /blocks 文件夹中创建为独立的 Liquid 文件，可在主题的多个部分中重复使用。
部分块(Section blocks): 在部分的 Liquid 文件内创建，仅限于在该部分内使用。
应用块(App blocks): 由商店安装的应用提供的块。

如何创建一个主题块(Theme block)

步骤 1: 创建 blocks 文件夹和块文件

在主题根目录下创建一个 /blocks 文件夹(如果尚不存在) 在该文件夹中创建一个新的 Liquid 文件，例如 text.liquid

步骤 2: 编写块的内容

主题块文件包含两部分:

标记(markup): 任何要在块中包含的 HTML 或 Liquid 内容
模式(schema): 使用 {% schema %} Liquid 标签，用于配置块的设置和属性以下是一个基本的文本块示例:


<div class="{{ block.settings.text_style }}">
    {{ block.settings.text }}
</div>
 
{% schema %}
{
    "name": "Text",
    "settings": [
{
    "type": "richtext",
    "id": "text",
    "label": "Text"
},
{
    "type": "select",
    "id": "text_style",
    "label": "Text style",
    "options": [
{
    "value": "body",
    "label": "Regular"
},
{
    "value": "subtitle",
    "label": "Subtitle"
}
    ],
    "default": "body"
}
    ],
    "presets": [
{
    "name": "Text"
},
{
    "name": "Content",
    "settings": {
    "text": "<p>Hello, World!</p>"
}
}
    ]
}
{% endschema %}

步骤 3: 添加预设(Presets)

预设需要在主题块的 schema 中定义，这样商家才能在主题编辑器的块选择器中使用它。可以为同一个主题块创建多个预设。在上面的例子中，文本主题块有两个名为Text和Content的预设。

在部分(Section)中使用主题块

创建主题块后，需要更新主题的部分以呈现这些块:

步骤 1: 在部分的 Liquid 文件中渲染块

使用以下代码在 section 文件中渲染块:


{% content_for 'blocks' %}

步骤 2: 更新部分的模式(schema)

要接受所有主题块，请在部分的 schema 的 blocks 属性中添加类型 @theme:


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

如何在可视化编辑器中使用创建的块

一旦您创建了主题块并在部分中启用了它们，商家就可以在 Shopify 主题编辑器中使用这些块:

在 Shopify 管理后台，转到”在线商店” > “主题”
点击您当前主题的”自定义”按钮
导航到包含支持主题块的部分的页面
选择该部分，点击”添加块”按钮
在出现的块选择器中，您将看到您创建的块(由于您添加的预设)
选择所需的块预设，它将被添加到部分中
使用块配置面板调整块的设置
您可以使用拖放功能重新排序块

关键是，确保块在 schema 中有正确的 presets 定义，这样它们才会出现在主题编辑器的块选择器中，并且确保你的部分在其 schema 中接受 @theme 类型的块。通过遵循这些步骤，您可以创建高度可定制的 Shopify 主题，让商家能够轻松地使用拖放界面来构建他们的页面。