17370845950

本文讲解如何在 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]），因此需借助变量赋值 + 字符串拼接 + 间接访问技巧来实现。

核心思路是：

1. 将 forloop.index（整数）转为字符串（使用 append: ""）；
2. 拼接出完整字段名（如 "image-menu" | append: "1" → "image-menu1"）；
3. 使用 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 中新增设置项即可，大幅提升主题的可维护性与复用性。