jekyll - 我如何以 3 批处理迭代 Jekyll/Liquid 集合项目？

Question

我有一个基本的 HTML 结构，其中每行显示 3 个项目。为了正确分隔它们，我使用了 2 个边框(第一个/第二个/第二个/第三个)，如下图所示:

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 | 来识别每个迭代，更具体地说，我们正在处理三个项目中的哪一个。模数: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 类应用于第二个项目。

这将输出:

 1:First post title
first item

2:Second post title
second item

0:Third post title
third item

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

1:Fourth post title
first item