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

我有一个基本的HTML结构，每行显示3个项目。为了正确地分隔它们，我使用了两个边框（第一个/第二个/第三个），如以下模式所示：

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

---

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

模过滤器：

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

然后，我们可以通过执行
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 %}

似乎可以使用CSS3选择器实现这一点，它允许您根据源代码顺序选择一个或多个元素。这样，您就不需要在“中间”项中添加类。谢谢@ShannonYoung。我将依靠液体使其更轻，但我肯定会在其他项目或情况下使用该技巧。我正要尝试模。美好的你认为按照问题注释中的建议使用css处理这个问题更好吗，还是我应该坚持使用过滤器？我假设是后者，因为它是预处理的，所以对于客户端浏览器来说应该更容易。因为你似乎对Liquid有自己的想法，如果你不介意的话，我想问问你的意见。这是一项相当古老的技术。你认为现在学习和使用它仍然是一个不错的选择，还是静态网站有更新/更优雅的选择？我更喜欢使用过滤器，它给了我更多的灵活性，但这两种选择都是有效的。学习液是一个不错的选择，因为它是Jekyll的默认模板系统，您还可以了解其他流行的模板系统，如Jinja和Twig，因为它们非常相似。感谢您的分享：）
 1:First post title
first item

2:Second post title
second item

0:Third post title
third item

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

1:Fourth post title
first item