时间戳

首页 > 解决方案 > 在 Jekyll 中每 3 个帖子后更改网格列

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

问题描述

我想以 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>

标签： jekyll

解决方案

您可以使用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>

...但循环更加优雅：

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

...但是，如果您想炫耀/表明您是真正的程序员，则应使用数学函数取模并从零开始计数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>

推荐阅读