23

我在 Jekyll 网站上工作，并试图输出嵌套在行 div 中的三列 div。Liquidcycle使用他们的过滤器使这变得非常容易：

{% for p in site.categories.post %}
    {% cycle 'add rows': '<div class="row">', nil, nil %}
        <div class="column">
            <a href="{{ p.url }}">{{ p.title }}</a>
        </div>
    {% cycle 'close rows': nil, nil, '</div>' %}
{% endfor %}

但是，这仅在有 3、6、9 等帖子时才真正有效。当帖子的总数不是三的倍数时，<div class="row">永远不会关闭 - for 循环在结束标记可以作为close rows循环的一部分输出之前结束。

在 Ruby、PHP 或任何其他语言中，我可以使用模数运算符轻松解决此问题，因此除了close rows循环​​之外，我还会输出</div>when if site.categories.size % 3 == 0。然而，Liquid，因为它是一种安全的模板语言，不支持模数。

<div class="row">当帖子总数不是三的倍数时，我还能做些什么来正确关闭？

4

7 回答 7

15

我发现这种方法效果很好！

{% assign mod = forloop.index0 | modulo:4 %}
{% if mod == 0 %}
   <!-- Do stuff -->
{% endif %}
于 2014-08-04T16:38:42.997 回答
13

对于您的具体示例，您可以{% cycle 'close rows': nil, '</div>', '</div>' %}在{% endfor %}.

于 2010-05-14T17:16:05.317 回答
8

目前唯一的方法是编写一个液体过滤器来实现这一点。在代码中适当的地方注册过滤器（如果使用导轨和不使用导轨，则在不同的位置）。

Liquid::Template.register_filter(LiquidFilters)

在您的项目/lib 目录中添加liquid_filters.rb：

module LiquidFilters  
  # makes modulus operation available to templates
  def mod(data, param)
    data % param
  end  
end

之后，您可以在模板中使用它，如下所示：{{ variable | 模式：5 }}

如果您需要将它用于某些逻辑，您可以捕获该值。

{% capture modulus %}{{ variable | mod:5 }}{% endcapture %}

只是我注意到捕获的值是一个字符串，所以为了比较它你使用

{% if modulus == "0" %}
 ..
{% endif %}
于 2010-06-02T06:35:54.790 回答
3

我在 for 循环中使用了另一个技巧：在你的情况下没用，如果你只是想要一个模数来确定你的行是否已经结束并且你需要一个新行，就像我一样。

在此示例中，我将使用一行 4 项：

{% assign currentRow = 1 %}
# enter the for loop ... then, with 4 as the divisor:
{% if forloop.index == 4 * currentRow %}
  # do whatever you want
  {% assign currentRow = currentRow + 1 %}
{% endif %}
# exit the for loop

不是很好，但很容易。

于 2011-12-08T23:24:37.930 回答
3

我意识到这个问题已经为提问者解决了，但我最近在 Liquid 中遇到了这种情况，我想我会提供我的解决方案，以防它帮助有类似标记要求的人。

在我的例子中，我已经通过了一个 if 语句来验证至少有一个帖子，所以我在循环之外创建了第一个“行”div。我也在 for 循环之后关闭它。这可以防止出现少于三个帖子的情况。

<div class="row">

    {% for p in posts %}
        <div class="column">
            <!-- Post code here -->
        </div>
        {% unless forloop.last %}
            {% cycle '', '', '</div><div class="row">' %}
        {% endunless %}
    {% endfor %}

</div>

在每三个帖子之后，循环将关闭当前行并打开一个新unless帖子，该帖子是 forloop 中的最后一个帖子，在这种情况下，我们不想打开新行，让包装将</div>其关闭。

于 2015-09-25T21:26:56.027 回答
2

我从这篇文章中学到了很多，这是我在整个项目中使用的三种模式。它也适用于 Bootstrap。只需更改以下代码中的列类。除了列，相同的模式可以应用于模数有用的其他场景，例如奇偶行。希望它可以帮助某人-

四列：

<div class="container">
    {% for post in site.posts %}
        {% cycle 'add row' : '<div class="row">', nil, nil, nil %}
            <div class="column">
                <!-- liquid tags here -->
            </div>
        {% cycle 'end row' : nil, nil, nil, '</div>' %}
    {% endfor %}
    {% cycle 'end row' : nil, '</div>', '</div>', '</div>' %}
</div>

三栏：

<div class="container">
    {% for post in site.posts %}
        {% cycle 'add row' : '<div class="row">', nil, nil %}
            <div class="column">
                <!-- liquid tags here -->
            </div>
        {% cycle 'end row' : nil, nil, '</div>' %}
    {% endfor %}
    {% cycle 'end row' : nil, '</div>', '</div>' %}
</div>

两列：

<div class="container">
    {% for post in site.posts %}
        {% cycle 'add row' : '<div class="row">', nil %}
            <div class="column">
                <!-- liquid tags here -->
            </div>
        {% cycle 'end row' : nil, '</div>' %}
    {% endfor %}
    {% cycle 'end row' : nil, '</div>' %}
</div>
于 2015-08-09T20:49:16.283 回答
1

IIRC Liquid 不会阻止模运算，只会阻止%字符。您可以在不使用运算符的情况下执行取模%。例如，14.modulo(3) => 2代替14 % 3.

于 2010-02-11T22:48:21.810 回答