Frage

Ich arbeite an einem Jekyll Ort und ich versuche, die Ausgabe drei Spalte div-Tags in einer Reihe div verschachtelt. dies macht recht einfach mit ihren cycle Filter:

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

Dies ist jedoch nur wirklich funktioniert, wenn es 3, 6, 9, usw. Beiträge. Wenn die Gesamtzahl der Stellen nicht ein Vielfaches von drei ist, nie die <div class="row"> geschlossen wird -. Die for-Schleife endet vor dem schließenden Tag Ausgabe als Teil des close rows Zyklus sein kann

In Ruby, PHP, oder jede andere Sprache, die ich dies leicht mit einem Modul Operator beheben konnte, so dass zusätzlich zu close rows Zyklus würde ich Ausgang </div> wenn if site.categories.size % 3 == 0. Allerdings Flüssigkeit, weil es eine sichere Template-Sprache ist, unterstützt nicht das Modul.

Was kann ich sonst noch richtig schließen <div class="row"> tun, wenn die Gesamtzahl der Beiträge ist nicht ein Vielfaches von drei?

War es hilfreich?

Lösung

Für Ihr spezielles Beispiel Sie {% cycle 'close rows': nil, '</div>', '</div>' %} nach dem {% endfor %} nutzen könnten.

Andere Tipps

Ich habe auf diese Weise große Arbeit gefunden!

{% assign mod = forloop.index0 | modulo:4 %}
{% if mod == 0 %}
   <!-- Do stuff -->
{% endif %}

Der einzige Weg, jetzt ist ein Flüssigkeitsfilter zu schreiben, dies zu erreichen. Registrieren Sie die Filter irgendwo im Code, wo es angebracht ist (es an verschiedenen Orten ist, wenn sie mit Schienen zu verwenden und ohne sie).

  

Flüssiges :: Template.register_filter (LiquidFilters)

Sie Projekte / lib add liquid_filters.rb:

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

Danach können Sie es wie folgt in Ihren Vorlagen verwenden können: {{Variable | mod: 5}}

Und wenn Sie es für einige Logik verwenden müssen, können Sie den Wert erfassen.

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

Gerade habe ich bemerkt, dass erfasste Wert ein String ist so, um sie zu vergleichen Sie mit

{% if modulus == "0" %}
 ..
{% endif %}

Ich habe einen anderen Trick in einer for-Schleife. Nutzlos in Ihrem Fall sinnvoll, wenn Sie nur eine Modulo, um herauszufinden, ob Ihre Linie beendet ist und Sie brauchen eine neue Reihe, wie ich

In diesem Beispiel werde ich mit einer Reihe von 4 Artikeln gehen:

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

Nicht sehr schön, aber einfach.

Ich weiß, die Frage nach dem Fragesteller gelöst ist, aber ich kam vor kurzem auf diese Art von Situation in Flüssig- und dachte, dass ich meine Lösung für den Fall zur Verfügung stellen würde hilft es jemand mit ähnlichen Auszeichnungs Anforderungen.

In meinem Fall habe ich bereits eine als bestanden, wenn Aussage zu überprüfen, dass es zumindest eine Stütze, so dass ich den ersten „Reihe“ div außerhalb der Schleife erstellt. Ich schließe es auch nach dem for-Schleife. Dies schützt vor einem Fall, in dem es weniger als drei Beiträge.

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

Nach jeweils drei Beiträgen, Zyklus wird die aktuelle Zeile schließen und eine neue unless eröffnet die Post der letzten in der forloop war, wobei in diesem Fall wollen wir nicht eine neue Zeile zu öffnen, und lassen Sie die Verpackung </div> schließen sie es nach oben.

Ich habe viel gelernt von diesem Posten, und diese sind drei Muster, die ich in meinem Projekt verwendet. Es hat super funktioniert mit zu Bootstrap. Ändern Sie einfach die Spalte Klasse in den folgenden Code. Statt Spalten können die gleichen Muster auf andere Szenarien angewandt werden, wenn Modulo nützlich, wie odd-even-Reihen. Hoffe, es hilft jemand -

Vier Säulen:

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

Drei Säulen:

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

Zwei Spalten:

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

IIRC Flüssigkeit blockiert nicht die Modulo-Operation, nur den % Charakter. Sie können mit einem Modul ohne Verwendung des % Betreiber durchzuführen. Zum Beispiel 14.modulo(3) => 2 statt 14 % 3.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top