在 Jekyll Liquid 中对 forloop.index 使用取模答案

【问题标题】：Using modulo on forloop.index in Jekyll Liquid在 Jekyll Liquid 中对 forloop.index 使用取模
【发布时间】：2018-06-08 05:45:25
【问题描述】：

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

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

...试图围绕每两个帖子创建一个行 div。这似乎不起作用，因为在输出中，每个单独的帖子都包装在一个行 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>

【问题讨论】：

标签： ruby for-loop jekyll liquid

【解决方案1】：

您的{% 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>

【讨论】：

这行得通，谢谢，并感谢您的解释。你知道为什么控制结构中不允许使用管道吗？

【解决方案2】：

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

【讨论】：