本文讲解如何在 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="%7B%7B%20block.settings.link_url%20%7D%7D">
<img src="%7B%7B%20block.settings[field_name]%20%7C%20img_url:%20'800x'%20%7D%7D" alt="{{ block.settings.alt_text }}" loading="lazy"><p>{{ block.settings.title }}</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/8225" title="应用程序在线商店宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/010/169994620790965.jpg" alt="应用程序在线商店宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/8225" title="应用程序在线商店宣传网站模板" class="overflowclass">应用程序在线商店宣传网站模板</a>
<p class="overflowclass">应用程序在线商店宣传网站模板是一款提供免费应用程序在线商店宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/8225" title="应用程序在线商店宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</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="%7B%7B%20block.settings[field_name]%20%7C%20img_url:%20'800x'%20%7D%7D" alt=""> {% else %} <img src="%7B%7B%20'placeholder.png'%20%7C%20asset_img_url:%20'800x'%20%7D%7D" alt="Placeholder"> {% endif %}
通过该方法，你可轻松扩展至 image-menu3、image-menu4……无需修改模板逻辑，仅需在 schema 中新增设置项即可，大幅提升主题的可维护性与复用性。
