我如何按 3 批次迭代 Jekyll /Liquid 集合项目？

Question

我有一个基础 HTML 结构，其中每行显示 3 个项目。为了正确分隔它们，我使用 2 个边框 (first/second second/third)，如下图所示：

ITEM1 | ITEM2 | ITEM3

使用SASS定义如下：

         .middle {
                position: relative;
                z-index: 1;

                &:before {
                    content: '';
                    width: 32px;
                    height: 100%;
                    position: absolute;
                    left: -24px;
                    top: 0;
                    display: block;
                    z-index: -1;
                    box-shadow: 32px 0 0 0 #fff, 0 -32px 0 0 #fff, 0 32px 0 0 #fff, 32px 32px 0 0 #fff, 32px -32px 0 0 #fff, 0 0 32px 0 rgba(0, 0, 0, 0.15);
                }

                &:after {
                    content: '';
                    width: 32px;
                    height: 100%;
                    position: absolute;
                    right: -24px;
                    top: 0;
                    display: block;
                    z-index: -1;
                    box-shadow: -32px 0 0 0 #fff, 0 -32px 0 0 #fff, 0 32px 0 0 #fff, -32px 32px 0 0 #fff, -32px -32px 0 0 #fff, 0 0 32px 0 rgba(0, 0, 0, 0.15);
                }
            }

我想在迭代 Jekyll 集合时区分这 3 行项目。换句话说，迭代第 3 项和第 3 项。它我几个小时前才开始研究 Jekyll，我可以看到 filters are available，但我不知道如何在标准集合迭代中实现这一点，如下所示：

{% for item in array %}
    {{ item }}
{% endfor %}

https://gist.github.com/smutnyleszek/9803727

Answer 1

为了能够在迭代时对一行中的项目进行分组，我们使用 modulo 过滤器：

Divides an output by a number and returns the remainder.

然后我们可以通过执行 forloop.index | modulo: 3:

来识别每个迭代，更具体地说，我们正在处理三个项目中的哪一个

余数为1则为第一项，为2则为第二项，为0则为第三项。例如遍历数组 site.posts

{% for post in site.posts %}
{% assign mod = forloop.index | modulo: 3 %}
{{ mod }}:{{post.title}}
{% if mod == 1 %}
<div>first item</div>
{% elsif mod == 2 %}
<div class="middle">second item</div>
{% else %}
<div>third item</div>
<hr>
{% endif %}
<br>
{% endfor %}

请注意，根据您的代码，我已将 middle css class 应用于第二项。

这将输出：

 1:First post title
first item

2:Second post title
second item

0:Third post title
third item

-----------------

1:Fourth post title
first item

我如何按 3 批次迭代 Jekyll /Liquid 集合项目？

How can I iterate on a Jekyll /Liquid collection items by batch of 3?

liquid

jekyll