For循环,在div中包含每两个帖子

Question

基本上,我使用的是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>

我怎么能做到这一点？

Answer 1

如果<div>s和帖子的数量是固定的(这似乎是基于你选择的答案的情况),有一个更短的方法来获得相同的输出 - 使用limit和offset:(
液体的分页方法)

<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>个帖子,每个帖子有两个帖子),那么你可以使用(在大多数其他答案中已经提到过),并用来查明是否当前指数是偶数还是奇数: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 %}

这也会返回您想要的输出,但适用于任意数量的帖子.

Answer 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 %}

然后我们可以迭代从行的偏移量开始的帖子片段(相当于posts[offset, 2]Ruby):

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

关闭row div元素并循环:

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

现在,在液体中:

{% 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 %}

希望这有助于某人!

Answer 3

试试这个:

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

Answer 4

我刚刚遇到过这个(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 %}