For循环，将每两个帖子包装在一个div中答案

【问题标题】：For loop, wrap every two posts in a divFor循环，将每两个帖子包装在一个div中
【发布时间】：2014-01-22 08:26:50
【问题描述】：

基本上，我正在使用Jekyll（它使用Liquid 模板语言）并且我正在尝试编写一个for 循环，它将每两个项目包装在div 中。

这是我当前的循环：

<div>
  {% for post in site.posts %}
    <a href="{{ post.url }}">{{ post.title }}</a>
  {% endfor %}
</div>

这样会输出四个帖子：

<div>
  <a href="#">Title</a>
  <a href="#">Title</a>
  <a href="#">Title</a>
  <a href="#">Title</a>
</div>

我对四个帖子的期望输出是：

<div>
  <a href="#">Title</a>
  <a href="#">Title</a>
</div>

<div>
  <a href="#">Title</a>
  <a href="#">Title</a>
</div>

我怎样才能做到这一点？

【问题讨论】：

你想用 div 包装每个链接吗？
@AsadMalik：不。查看更新后的帖子，我希望每两个帖子链接都包含在 div 中。

标签： jekyll liquid

【解决方案1】：

如果<div>s 和帖子的数量是固定的（这似乎是基于您选择的答案的情况），有一种更短的方法可以获得相同的输出 - 使用 @987654324 @ 和 offset：
（Liquid 的分页方法）

<div>
  {% for post in site.posts limit: 2 %}
    <a href="{{ post.url }}">{{ post.title }}</a>
  {% endfor %}
</div>
<div>
  {% for post in site.posts limit: 2 offset: 2 %}
    <a href="{{ post.url }}">{{ post.title }}</a>
  {% endfor %}
</div>

更好的解决方案：

如果帖子数量不固定（所以当你有100个帖子时，你想要50个<div>s，每个帖子两个帖子），那么你可以使用forloop.index（在大多数其他答案中已经提到过），并使用modulo 找出当前索引是偶数还是奇数：

{% for post in site.posts %}
  {% assign loopindex = forloop.index | modulo: 2 %}
  {% if loopindex == 1 %}
    <div>
      <a href="{{ post.url }}">{{ post.title }}</a>
  {% else %}
      <a href="{{ post.url }}">{{ post.title }}</a>
    </div>
  {% endif %}
{% endfor %}

这也会返回您想要的输出，但适用于任何个帖子。

【讨论】：

非常感谢，尽管我没有使用您的确切答案，但研究“模”函数将我指向此处（gist.github.com/leemachin/2366832），这对于我正在尝试的事情来说确实是个好方法要做，我会发布我更新代码的另一个答案。
这不是缺少一个
用于站点帖子的奇数数量吗？

【解决方案2】：

我知道我玩游戏迟到了，但我发现我觉得这是一个相当优雅的解决方案，不会让人觉得老套。

使用for 循环的limit 和offset 参数，我们可以一次迭代一行，每行N 个帖子。

首先，我们计算需要枚举的行数：

{% assign rows = site.posts.size | divided_by: 2.0 | ceil %}

Ruby 等价物是 rows = (posts.size / 2.0).ceil（奇数有自己的行）。

接下来，我们将遍历行：

{% for i in (1..rows) %}
  <div>

现在我们需要用(i - 1) * 2（使用forloop.index0）计算集合偏移量：

  {% assign offset = forloop.index0 | times: 2 %}

然后我们可以迭代从行偏移量开始的帖子切片（相当于 Ruby 中的posts[offset, 2]）：

    {% for post in site.posts limit:2 offset:offset %}
      <a href="{{ post.url }}">{{ post.title }}</a>
    {% endfor %}

关闭行div元素和for循环：

  </div>
{% endfor %}

就是这样！

在 Ruby 中，这将是：

rows = (posts.size / 2.0).ceil # the number of rows
(1..rows).each do |i|
  offset = (i - 1) * 2
  # <div>
  posts[offset, 2].each do |post|
    # <a href="#{post.url}>#{post.title}</a>
  end
  # </div>
end

现在一起在 Liquid 中：

{% assign rows = site.posts.size | divided_by: 2.0 | ceil %}
{% for i in (1..rows) %}
  {% assign offset = forloop.index0 | times: 2 %}
  <div>
    {% for post in site.posts limit:2 offset:offset %}
      <a href="{{ post.url }}">{{ post.title }}</a>
    {% endfor %}
  </div>
{% endfor %}

希望这对某人有所帮助！

【讨论】：

【解决方案3】：

我刚刚遇到这个 (https://gist.github.com/leemachin/2366832)，这是一个比其他答案中发布的更好的解决方案，请记住，您需要这个插件 (https://gist.github.com/leemachin/2366832#file-modulo-filter-rb) 才能工作：

{% for post in paginator.posts %}

  {% capture modulo %}{{ forloop.index0 | mod:2 }}{% endcapture %}

  {% if modulo == '0' or forloop.first %}
    <div>
  {% endif %}

    <a href="{{ post.url }}">{{ post.title }}</a>

  {% if modulo == '1' or forloop.last %}
    </div>
  {% endif %}

{% endfor %}

【讨论】：

【解决方案4】：

试试这个：

<div>
    {% for post in paginator.posts %}
        <div>
            {% if forloop.index == 1 %}
                <a href="">{{ post.title }}</a>
            {% endif %}
            {% if forloop.index == 2 %}
                <a href="">{{ post.title }}</a>
            {% endif %}
        </div>
        <div>
            {% if forloop.index == 3 %}
                <a href="">{{ post.title }}</a>
            {% endif %}
            {% if forloop.index == 4 %}
                <a href="">{{ post.title }}</a>
            {% endif %}
        </div>
    {% endfor %}
</div>

【讨论】：

我不得不用 {% endif %} 替换一些实例 {% endfor %} 以停止出错，但它仍然无法正常工作，我担心它会产生以下输出 pastebin.com/Kt8gA3nw 我真的谢谢你帮助我:)

【解决方案5】：

我真的应该专注于我正在做的事情，但是对于一个一岁的孩子把她所有的玩具都给我来说很难...... :D

代码现在应该可以工作了：

<div>
    <div>
        {% for post in paginator.posts %}
            {% if forloop.index == 1 %}
                <a href="">{{ post.title }}</a>
            {% endif %}
            {% if forloop.index == 2 %}
                <a href="">{{ post.title }}</a>
            {% endif %}
        {% endfor %}
    </div>
    <div>
        {% for post in paginator.posts %}
            {% if forloop.index == 3 %}
                <a href="">{{ post.title }}</a>
            {% endif %}
            {% if forloop.index == 4 %}
                <a href="">{{ post.title }}</a>
            {% endif %}
        {% endfor %}
    </div>
</div>

应该给出的html：

<div>
    <div>
        <a href="">Title 1</a>
        <a href="">Title 2</a>
    </div>
    <div>
        <a href="">Title 3</a>
        <a href="">Title 4</a>
    </div>
</div>

【讨论】：

成功！你是男人，只是用最终代码更新这篇文章，再次感谢！

【解决方案6】：

查看 Christian 的解决方案后，我将（基于哈巴狗的）代码更新为：

.blog
    .container
        .row
            .col-xs-0
            .col-xs-12
                h1 Blog
                p Summit blog with latest news, thinking and participant's posts.
            .col-xs-0
        | {% for page in site.posts                         %}
        | {% assign loopindex = forloop.index | modulo: 2   %}
        | {% if loopindex == 1                              %}
        .row
        | {% endif %}
        span
            .col-xs-6.col-sm-6
                .card
                    .card-top
                        + add-title
                        + add-author
                    .card-block
                        + add-snippet
        | {% endfor                                        %}

【讨论】：

【解决方案7】：

好的，我在没有适当样式的情况下进行了快速尝试，但这应该可以：

<div>
{% for post in paginator.posts %}
    {% case forloop.index %}
    <div>
    {% when 1 %}
        <a href="">{{ post.title }}</a>
    {% when 2 %}
        <a href="">{{ post.title }}</a>
    </div>
    <div>
    {% when 3 %}
        <a href="">{{ post.title }}</a>
    {% when 4 %}
        <a href="">{{ post.title }}</a>
    </div>
{% endcase %}
{% endfor %}
</div>

【讨论】：

虽然不是最好的代码，但我自己是 jekyll 的新手，很难尝试这样的东西，因为（据我所知）这种特定的操作不是很容易排序，但是因为你要每页四篇文章，这应该可以解决分页问题......虽然我没有测试我应该做的那个理论......
非常感谢，但我想我在使用它时会遇到问题。它假设一个页面上总是有四个帖子，但事实并非如此。例如，当我发布的帖子少于 4 篇，或者我发布了 7 篇左右的帖子时；第一页有 4 个帖子，但第二页有 3 个帖子，这将导致 HTML 无效，因为错过了 </div>。你显然比我有更多的 Jekyll 循环经验，因为我来自 WordPress 背景，我习惯于做bit.ly/1f3vIqw 之类的事情，有没有办法模仿这个？

【解决方案8】：

在@smilinmonki666 的帮助下，我也按照自己的意愿完成了这项工作，这是我使用的最终代码：

{% assign current_page_posts = paginator.posts | size %}

{% if current_page_posts > 0 %}
  <div>

    <div>
      {% for post in paginator.posts %}
        {% if forloop.index == 1 %}
          <a href="{{ post.url }}">{{ post.title }}</a>
        {% endif %}

        {% if forloop.index == 2 %}
          <a href="{{ post.url }}">{{ post.title }}</a>
        {% endif %}
      {% endfor %}
    </div>

    {% if current_page_posts > 2 %}
      <div>
        {% for post in paginator.posts %}
          {% if forloop.index == 3 %}
            <a href="{{ post.url }}">{{ post.title }}</a>
          {% endif %}

          {% if forloop.index == 4 %}
            <a href="{{ post.url }}">{{ post.title }}</a>
          {% endif %}
        {% endfor %}
      </div>
    {% endif %}

  </div>
{% endif %}

【讨论】：

【解决方案9】：

您可以按照https://shopify.github.io/liquid/tags/iteration/ 中的说明使用cycle 标记来完成此操作

{% for post in site.posts %}
  {% cycle '<div>', '' %}
    <a href="{{ post.url }}">{{ post.title }}</a>
  {% cycle '', '</div>' %}
{% endfor %}

输出

<div>
  <a href="#">Title</a>
  <a href="#">Title</a>
</div>

<div>
  <a href="#">Title</a>
  <a href="#">Title</a>
</div>

【讨论】：