Shopify中通过Liquid遍历重复型高级自定义字段(ACF)输出多元字段值的问题排查

我尝试用Liquid循环从Shopify的重复型高级自定义字段（命名空间为faq，包含heading和content字段）中输出数据，当前代码如下：

<div class="feed-faqs">
 {% if page.metafields.faq != blank %}
 {% assign faqs = page.metafields.faq %}
 {% for item in faqs %}
 {% assign i = forloop.index %}
 <div class="item item--{{ i }}">
 {{ heading[i] }}
 {{ content[i] }}
 </div>
 {% endfor %}
 {% endif %}
</div>

但前端只输出了空的item容器：

<div class="feed-faqs">
 <div class="item item--1">
 </div>
 <div class="item item--2">
 </div>
</div>
想请教：这种实现重复型字段多值输出的思路可行吗？如果可行，我获取数据时哪里出错了？

---

### 可行性结论
完全可行！Shopify的list类型元字段（也就是你说的重复型ACF）就是用来存储这类结构化重复数据的，你的核心思路没问题，只是**数据访问的方式错误**。

### 错误分析
1. **误解了元字段的数据结构**：
   你假设`heading`和`content`是两个独立的数组，想用索引`[i]`去取值，但实际上，重复型元字段的结构是一个**对象数组**——每个数组元素（也就是循环里的`item`）本身就包含`heading`和`content`两个属性。

2. **未正确访问循环项的属性**：
   你写的`{{ heading[i] }}`和`{{ content[i] }}`是无效的，因为`heading`和`content`这两个变量根本没有定义，Liquid不知道它们指向哪里。正确的做法是直接从当前循环的`item`对象中读取对应的字段。

### 修正后的代码
```liquid
<div class="feed-faqs">
 {% if page.metafields.faq != blank %}
 {% assign faqs = page.metafields.faq %}
 {% for item in faqs %}
 {% assign i = forloop.index %}
 <div class="item item--{{ i }}">
   <h3>{{ item.heading }}</h3>
   <div class="faq-content">{{ item.content }}</div>
 </div>
 {% endfor %}
 {% endif %}
</div>

额外调试小技巧 #

如果你不确定元字段的具体结构，可以在模板里临时添加{{ page.metafields.faq | json }}来输出完整的JSON结构，这样就能清晰看到数据的层级关系，快速定位问题。

内容的提问来源于stack exchange，提问作者Graeme Bryson