
本文讲解如何在 shopify liquid 的 for 循环中,利用 `forloop.index` 动态构建 settings 变量名(如 `image-menu1`、`image-menu2`),并通过字符串拼接与变量间接引用实现灵活渲染。
在 Shopify 主题开发中,常需为每个区块(block)配置多张菜单图(如 image-menu1、image-menu2 等)。若直接硬编码 block.settings.image-menu1,则无法适配不同索引的字段;而 Liquid 不支持原生的动态变量名语法(如 block.settings["image-menu" | append: forloop.index]),因此需借助变量赋值 + 字符串拼接 + 间接访问技巧来实现。
核心思路是:
- 将 forloop.index(整数)转为字符串(使用 append: "");
- 拼接出完整字段名(如 "image-menu" | append: "1" → "image-menu1");
- 使用 block.settings[variable_name] 语法进行动态属性访问(Liquid 支持方括号形式的键名访问)。
✅ 正确写法如下:
{% for block in section.blocks %}
{% assign index = forloop.index | append: "" %}
{% assign field_name = "image-menu" | append: index %}
@@##@@
{{ block.settings.title }}
{% endfor %}⚠️ 注意事项:
- block.settings[field_name] 是关键——必须用方括号语法,而非点号(block.settings.field_name 会查找字面名为 field_name 的属性,而非其值);
- 确保后台 schema 中已正确定义对应字段,例如:
{ "type": "image_picker", "id": "image-menu1", "label": "主菜单图 1" } - 若索引从 0 开始需用 forloop.index0,注意与字段命名一致性;
- 建议添加空值判断提升健壮性(尤其当部分区块未上传图片时):
{% if block.settings[field_name] %} @@##@@ {% else %} @@##@@ {% endif %}
通过该方法,你可轻松扩展至 image-menu3、image-menu4……无需修改模板逻辑,仅需在 schema 中新增设置项即可,大幅提升主题的可维护性与复用性。










