如何按 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，我可以看到过滤器可用，但我不知道如何在标准集合迭代中实现这一点，如下所示：

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

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

Answer 1

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

将输出除以一个数字并返回余数。

然后我们可以识别每次迭代，更具体地说，我们正在处理的三个项目中的哪一个 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 %}

请注意，根据您的代码，我应用了 middlecss 类应用于第二项。

这将输出：

 1:First post title
first item

2:Second post title
second item

0:Third post title
third item

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

1:Fourth post title
first item