Eleventy:输出集合中数据的子集

Question

我有一个products集合，我希望从其中输出一系列图像。我的前置内容包括以下…

---
carousel:
  - image: '/assets/img/img.jpg'
    imageAlt: 'text'
  - image: '/assets/img/img-02.jpg'
    imageAlt: 'text'
  - image: '/assets/img/img-03.jpg'
    imageAlt: 'text'
  - image: '/assets/img/img-04.jpg'
    imageAlt: 'text'
  - image: '/assets/img/img-05.jpg'
    imageAlt: 'text'
---

然后我的部分人员就会打电话给传送带。

{% for item in collections.products %}
  <figure class="outer-5by3">
    <img loading="lazy" class="inner-5by3" src="{{ item.data.carousel.image }}" alt="{{ item.data.carousel.imageAlt }}">
  </figure>
{% endfor -%}

但是，结果输出是否具有空的src和alt属性？我不明白为什么？我唯一的猜测是，这与我试图循环通过前面物质的子集的方式有关？

在相同的products集合中，我有一个在前面定义为…的主图像

img_main:
  image: '/assets/img/img.jpg'
  imageAlt: 'text'

使用以下模板…

{% for product in collections.products -%}
  <figure class="outer-1by1">
    <img class="inner-1by1" src="{{ product.data.img_main.image }}" width="160" height="143" alt="{{ product.data.img_main.imageAlt }}" loading="lazy" />
  </figure>
{% endfor -%}

这就产生了想要的输出。

<figure class="outer-1by1">
  <img class="inner-1by1" src="/assets/img/img.jpg" width="160" height="143" alt="text" loading="lazy" />
</figure>

因此，我假设item.data.carousel.image可以工作？

Answer 1

通过设置两个循环来工作，第一个循环遍历整个集合。第二，数据的子集(数组)。

{% set allProductPosts = collections.featuredProduct -%} // First we call all posts in the collection
<div class="product_carousel">
  <div class="product_carousel_featured">
    {% for item in allProductPosts -%} // We then loop through the collection
    {% for carousel in item.data.carousel %} // Then loop through the subset (array) of data
    <div class="product_carousel_cell">
      <figure class="outer-5by3">
        <img class="inner-5by3" src="{{ carousel.image }}" alt="{{ carousel.imageAlt }}" loading="lazy" />
      </figure>
    </div>
    {% endfor -%}
    {% endfor -%}
  </div>
</div>

感谢Raymond Camden将我推向一个解决方案。