如何按 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 by 3。 它 几个小时前我刚开始研究 Jekyll，我可以看到 filters are available，但我不知道如何在标准集合迭代中实现这一点，如下所示：

{% 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 %}

请注意，根据您的代码，我已将 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