如何在 Jekyll 的变量数组中迭代一个键的数组？

Question

这是我如何设置页面的前端。

---

title: Test page
layout: default

image:
  - url: image01.png
    caption: 'Logo design'
    class: ['text-white']
    alt: 'An alt text'
  - url: image02.png
    caption: 'Website development'
    class: ['text-white', 'fullwidth-figure']
    alt: 'An alt text'

---

在页面布局中，这是我遍历 image: 变量数组的方式。

{% for image in page.image %}
<figure class="{% if image.class contains 'fullwidth-figure' %}fullwidth-figure{% else %}contained{% endif %}">
<img src="{{ site.photoset_url }}/{{ image.url }}" alt="{{ image.alt }}">
<figcaption>
{{ image.caption | textilize }}
</figcaption>
</figure>
{% endfor %}

这会从页面的前面的关联数组列表中获取我需要的所有内容。到目前为止，一切都很好，但我希望能够遍历 class: 键数组。

那么，如果我设置 class: ['text-white', 'fullwidth-figure']，我如何检查“fullwidth-figure”值以及如何“打印”这两个值？

Answer 1

您可以使用join filter 打印所有类（将您自己从 for 循环中拯救出来），然后仅当“fullwidth-figure”不存在时使用unless tag 打印“包含”：

{% for image in page.image %}
<figure class="{{ image.class | join: ' ' }}{% unless image.class contains 'fullwidth-figure' %} contained{% endunless %}">
    <!-- image -->
</figure>
{% endfor %}