Forloop 结果并迭代 class 个名称

Question

我正在尝试使用 Shopify 的 Liquid 语法创建一个 forloop，它将计算从特定产品返回的图像结果，并在每个实例中迭代唯一的 div 类所以我可以使用这些类作为 scrollto 动画的锚点。

目前，我正在尝试：

 <ul class="scroll-to-nav>
 {% for image in product.images %}
   <li class="scroll-to-nav-link><a href="#link">link</a></li>
 {% endfor %}
 </ul>

期望的结果类似于：

<ul class="scroll-to-nav>
 <li class="scroll-to-nav-link-1><a href="#link-1">link 1</a></li>
 <li class="scroll-to-nav-link-2><a href="#link-2">link 2</a></li>
 <li class="scroll-to-nav-link-3><a href="#link-3">link 3</a></li>
 <li class="scroll-to-nav-link-4><a href="#link-4">link 4</a></li>
 <li class="scroll-to-nav-link-5><a href="#link-5">link 5</a></li>
 etc etc etc
</ul>


<img src="path-to-img.jpg" id="link-1">
<img src="path-to-img.jpg" id="link-2">
<img src="path-to-img.jpg" id="link-3">
<img src="path-to-img.jpg" id="link-4">
<img src="path-to-img.jpg" id="link-5">
etc etc etc

Answer 1

正如 Drip 在评论中指定的那样，信息在文档中可用。这是一种实现您想要做的事情的方法：

{% for image in product.images %}
  <a href="#" id="link{{ forloop.index }}">Link {{ forloop.index }}</a>
{% endfor %}

如果您需要获取循环的长度，您可以使用 {{ forloop.length }}。

Forloop 结果并迭代 class 个名称

Forloop results and iterate class names

php

liquid

shopify