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

Posted 2023-02-15

技术标签:

【中文标题】For循环，将每两个帖子包装在一个div中【英文标题】：For loop, wrap every two posts in a 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 中。 【参考方案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>

【讨论】：

以上是关于For循环，将每两个帖子包装在一个div中的主要内容，如果未能解决你的问题，请参考以下文章

Wordpress Loop：如何将每 3 个帖子包装成一个 div？

PHP循环：围绕每三个项目语法添加一个div [重复]

循环浏览 WordPress 帖子，并将每个 X 帖子包装在 DIV [重复]

使用包装类将每 2 个不同的元素包装在特定的 div 中

Python两个for循环嵌套练习

将每 3 个 div 包装在一个 div 中