0

我有一个产品集合，我希望从中输出图像轮播。我的前事包括以下内容……</p> 

---
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 属性？我不明白为什么？我唯一的猜测是它与我如何尝试循环遍历前端物质的子集有关？

在同一个产品集合中，我在前面定义了一个主图像......</p> 

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

使用以下模板...</p> 

{% 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会起作用？

4

1 回答 1

0

通过设置两个循环来完成这项工作，第一个循环遍历整个集合。第二，数据子集（数组）。

{% 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 推动我找到解决方案。

于 2020-08-21T07:45:28.887 回答