本文介绍在 shopify liquid 模板中，如何利用 `forloop.index` 动态生成变量名（如 `image-menu1`、`image-menu2`），并通过字符串拼接与变量间接引用实现灵活渲染。
在 Shopify 主题开发中，常需为每个区块（block）循环渲染多个关联设置项，例如 image-menu1、image-menu2 等。但 Liquid 不支持直接使用 {{ block.settings["image-menu" | append: forloop.index] }} 这类数组式动态键访问（原生不支持 [] 动态属性语法），因此需借助变量拼接 + settings 对象的间接引用技巧。
正确做法是：先将 forloop.index 转为字符串，再拼接出完整字段名，最后通过 block.settings[variable_name] 语法（Liquid 10.0+ 支持）或更兼容的 block.settings.[field] 替代方案实现。但需注意——标准 Liquid 不允许 block.settings[variable] 写法，因此推荐以下稳健方案：
{% for block in section.blocks %}
{% assign index = forloop.index | append: "" %}
{% assign field_name = "image-menu" | append: index %}
{%- comment -%} 安全获取字段值：使用 default 过滤器避免空值报错 {%- endcomment -%}
{% assign image_src = block.settings[field_name] %}
{% if image_src %}
<a href="#">
@@##@@
<p>Item {{ forloop.index }}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1993" title="Sesame AI"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680065457421.png" alt="Sesame AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1993" title="Sesame AI">Sesame AI</a>
<p>一款开创性的语音AI伴侣，具备先进的自然对话能力和独特个性。</p>
</div>
<a href="/ai/1993" title="Sesame AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</a>
{% endif %}
{% endfor %}✅ 关键要点说明：
- forloop.index 返回整数（从 1 开始），必须用 | append: "" 显式转为字符串，否则拼接会失败；
- block.settings[field_name] 是 Liquid 10.0+ 引入的动态属性访问语法，已在 Shopify Online Store 2.0 主题中广泛支持；若主题较旧（如 OS 1.0），可改用预定义逻辑（如 {% if forloop.index == 1 %}{{ block.settings.image-menu1 }}{% endif %}），但牺牲可扩展性；
- 始终检查 image_src 是否存在，避免因缺失设置项导致空白
标签或布局异常；
- img_url 过滤器建议指定宽高参数（如 "800x"），并配合 width/height 属性提升 LCP 性能。
? 扩展提示：若需同时渲染 image-menu1 和 image-menu2（即每轮循环输出两个图），可在同一 for 循环内重复拼接逻辑，或改用 forloop.index0（从 0 开始）配合数学运算生成多组索引。但务必确保对应设置项已在 schema.json 中正确定义，否则 block.settings[...] 将返回 nil。
掌握此技巧后，你可轻松实现“N 个菜单图”、“N 个标题文案”等可配置区块结构，大幅提升主题复用性与商家后台编辑体验。
