23

私はJekyllサイトで作業しており、行divにネストされた3つの列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などの投稿がある場合にのみ実際に機能します。投稿の総数が3の倍数でない場合、<div class="row">決して閉じられません。forループは、終了タグがclose rowsサイクルの一部として出力される前に終了します。

Ruby、PHP、またはその他の言語では、モジュラス演算子を使用してこれを簡単に修正できるため、close rowsサイクルに加えて</div>、if site.categories.size % 3 == 0。ただし、Liquidは安全なテンプレート言語であるため、モジュラスをサポートしていません。

<div class="row">投稿の総数が3の倍数でない場合、適切に閉じるために他に何ができますか？

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

その後、テンプレートで次のように使用できます。{{変数| mod：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でこのような状況に遭遇し、同様のマークアップ要件を持つ人に役立つ場合に備えて解決策を提供すると思いました。

私の場合、少なくとも1つの投稿があることを確認するifステートメントをすでに渡したので、ループの外側に最初の「行」divを作成しました。また、forループの後で閉じます。これにより、投稿が3つ未満の場合から保護されます。

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

3つの投稿ごとに、cycleは現在の行を閉じてunless新しい行を開きます。この場合、投稿はforloopの最後の行でした。この場合、新しい行を開きたくないので、ラッピング</div>で閉じます。

于 2015-09-25T21:26:56.027 に答える
2

この投稿から多くのことを学びました。これらは、プロジェクト全体で使用した3つのパターンです。Bootstrapでもうまく機能しました。次のコードで列クラスを変更するだけです。列の代わりに、奇数行や偶数行など、モジュロが役立つ他のシナリオに同じパターンを適用できます。それが誰かを助けることを願っています-

4列：

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

3列：

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

2列：

<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 に答える