在 Jekyll Liquid 中对 forloop.index 使用模数

Question

我正在尝试设置一个循环以在我的索引页面上显示 post，以便它们适合 skeleton.css 框架。第一个 post 应该占据十二列，并包含在它自己的行中。此后每两个 posts 应该换行。我正在使用以下内容：

{% elsif forloop.index | modulo: 2 == 0 %}

...尝试在每两个 post 周围创建一行 div。这似乎不起作用，因为在输出中，每个 individual post 都包装在一行 div.

中

<div class="posts">

    {% for post in site.posts %}
        {% if forloop.first == true %}

            <div class="row">
                <article class="twelve columns"></article>
            </div>

        {% elsif forloop.index | modulo:2 == 0 %}

            <div class="row">
                <article class="six columns"></article>
            </div>

        {% else %}

            <article class="six columns"></article>

        {% endif %}
    {% endfor %}

</div>

Answer 1

索引 1：跳过

索引2：开始两篇文章换行

索引 3：结束两篇文章

索引4：开始两篇文章换行

索引 5：结束两篇文章

.

<div class="posts">

    {% for post in site.posts %}
        {% if forloop.first == true %}

            <div class="row">
                <article class="twelve columns"></article>
            </div>

        {% elsif forloop.index | modulo:2 == 0 %}

            <div class="row">
                <article class="six columns"></article>

        {% else %}

                <article class="six columns"></article>
            </div>

        {% endif %}
    {% endfor %}

</div>

虽然这会引入一个新的问题。它可能适用于 3 篇或 5 篇，但不适用于 4 或 6 篇。

需要使用辅助变量来跟踪最后一行的开放性div:

{% assign opendiv = false %}

<div class="posts">

    {% for post in site.posts %}

        {% assign remainder = forloop.index | modulo:2 %}

        {% if forloop.first == true %}

            <div class="row">
                <article class="twelve columns"></article>
            </div>

        {% elsif forloop.last == true and opendiv == false %}

            <div class="row">
                 <article class="six columns"></article>
            </div>

        {% elsif remainder == 0 %}

            {% opendiv = true %}
            <div class="row">
                <article class="six columns"></article>

        {% elsif opendiv == true %}

            {% opendiv = false %}
                <article class="six columns"></article>
            </div>

        {% endif %}
    {% endfor %}

</div>

Answer 2

您的 {% elsif forloop.index | modulo:2 == 0 %} 条件不正确，因为在这样的控制结构中不允许使用管道。它最终解析为 {% elsif forloop.index %}，这始终为真。

你可以这样做：

<div class="posts">
  {% for post in site.posts %}
    {% assign remainder = forloop.index | modulo: 2 %}
    {% if forloop.first == true %}
      <div class="row">
        <article class="twelve columns"></article>
      </div>
    {% elsif remainder == 0 %}
      <div class="row">
        <article class="six columns"></article>
      {% if forloop.last %}
      </div>
      {% endif %}
    {% else %}
        <article class="six columns"></article>
      </div>
    {% endif %}
  {% endfor %}
</div>

在 Jekyll Liquid 中对 forloop.index 使用模数

Using modulo on forloop.index in Jekyll Liquid

ruby

for-loop

liquid

jekyll