在 Jekyll 中每 3 个帖子后更改网格列

Question

我想以 3x2x3 网格布局显示我的博文，其中第一行有 3 个帖子，第二行有 2 个帖子，第三行有 3 个帖子。我的方法只是重复 for loop 使用 limit 和 offset 来过滤它。试图找出一种更优雅的方法来做到这一点而不使用那么多 for loop.

代码

<div class='container'>
    <div class='row'>
        {% for post in site.posts limit: 3 %}
            <div class='col-sm-6 col-md-4'>
                <p>{{ post.title }}</p>
            </div>
        {% endfor %}

        {% for post in site.posts limit: 2 offset: 3 %}
            <div class='col-sm-6'>
                <p>{{ post.title }}</p>
            </div>
        {% endfor %}

        {% for post in site.posts limit: 3 offset: 5 %}
            <div class='col-sm-6 col-md-4'>
                <p>{{ post.title }}</p>
            </div>
        {% endfor %}
    </div>
</div>

Answer 1

您可以使用 forloop.index 来执行此操作：

<div class='container'>
    <div class='row'>
        {% for post in site.posts limit: 8 %}
            <div class='col-sm-6{% unless forloop.index == 4 or forloop.index == 5 %} col-md-4{% endunless %}'>
                <p>{{ post.title }}</p>
            </div>
        {% endfor %}
    </div>
</div>

... 但是 cycle 更优雅：

<div class='container'>
    <div class='row'>
        {% for post in site.posts limit: 8 %}
            <div class='col-sm-6{% cycle "","",""," col-md-4"," col-md-4" %}'>
                <p>{{ post.title }}</p>
            </div>
        {% endfor %}
    </div>
</div>

...但是如果你想证明 off/show 你是一个真正的程序员，你应该使用数学函数 modulo 并使用 forloop.index0 从零开始计数：

<div class='container'>
    <div class='row'>
        {% for post in site.posts limit: 8 %}
            {% assign mod = forloop.index0 | modulo: 5 %}
            <div class='col-sm-6{% if mod == 3 or mod == 4 %} col-md-4{% endif %}'>
                <p>{{ post.title }}</p>
            </div>
        {% endfor %}
    </div>
</div>

在 Jekyll 中每 3 个帖子后更改网格列

Change grid column after every 3 posts in Jekyll

jekyll