本文讲解如何在 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 %}
<a href="{{ block.settings.link_url }}">
<img
src="{{ block.settings[field_name] | img_url: '800x' }}"
alt="{{ block.settings.alt_text }}"
loading="lazy"
>
<p>{{ block.settings.title }}</p>
</a>
{% 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] %} <img src="{{ block.settings[field_name] | img_url: '800x' }}" alt=""> {% else %} <img src="{{ 'placeholder.png' | asset_img_url: '800x' }}" alt="Placeholder"> {% endif %}
通过该方法，你可轻松扩展至 image-menu3、image-menu4……无需修改模板逻辑，仅需在 schema 中新增设置项即可，大幅提升主题的可维护性与复用性。
