Pour boucle, envelopper tous les deux poteaux dans un div

En Gros, j'utilise Jekyll (qui utilise le Liquide création de modèles de langue) et je suis en train d'écrire un for boucle qui enroule tous les deux articles dans un div.

C'est ma boucle de courant:

<div>
  {% for post in site.posts %}
    <a href="{{ post.url }}">{{ post.title }}</a>
  {% endfor %}
</div>

Qui serait sortie de quatre postes comme suit:

<div>
  <a href="#">Title</a>
  <a href="#">Title</a>
  <a href="#">Title</a>
  <a href="#">Title</a>
</div>

Mon choix de sortie pour les quatre postes est le suivant:

<div>
  <a href="#">Title</a>
  <a href="#">Title</a>
</div>

<div>
  <a href="#">Title</a>
  <a href="#">Title</a>
</div>

Comment puis-je accomplir?

24
demandé sur Nathan Arthur 2014-01-04 21:49:59

9 réponses

je sais que je suis en retard au jeu mais j'ai trouvé ce que je sens est une solution assez élégante qui ne se sent pas hacky.

for boucle limit et offset params, nous pouvons itérer une ligne à la fois, N postes par ligne.

tout d'abord, nous comptons le nombre de rangées sur lesquelles nous aurons besoin d'énumérer:

{% assign rows = site.posts.size | divided_by: 2.0 | ceil %}

l'équivalent en rubis serait rows = (posts.size / 2.0).ceil (les nombres impairs ont leur propre ligne).

ensuite, nous allons itérer sur le lignes:

{% for i in (1..rows) %}
  <div>

maintenant nous devons calculer l'offset de collecte avec (i - 1) * 2(en utilisant forloop.index0):

  {% assign offset = forloop.index0 | times: 2 %}

puis nous pouvons itérer sur la tranche de poteaux à partir du décalage de la ligne (équivalent à posts[offset, 2] en Ruby):

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

fermer la rangée div élément et pour la boucle:

  </div>
{% endfor %}

C'est ça!

En Ruby, ce serait:

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

Tous ensemble, dans Liquide:

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

J'espère que cela aidera quelqu'un!

9
répondu Matt Todd 2017-07-27 03:43:05

Si le nombre de <div> s et les poteaux sont fixes (ce qui semble être le cas basé sur la réponse que vous avez sélectionnée), il y a un moyen plus court pour obtenir la même sortie - en utilisant limit et offset:

(Liquide à l'approche de la pagination)

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

Même la meilleure solution:

Si le nombre de postes n'est pas fixe (donc quand vous avez 100 messages, vous voulez 50 , vous pouvez utiliser forloop.index(déjà mentionné dans la plupart des autres réponses), et utiliser modulo pour savoir si l'indice actuel est pair ou impair:

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

cela retourne aussi votre sortie désirée, mais fonctionne pour nombre de postes.

33
répondu Christian Specht 2014-01-06 19:28:21

je viens de le découvrir (https://gist.github.com/leemachin/2366832) qui est une bien meilleure solution que celles postées dans d'autres réponses, nues à l'esprit que vous aurez besoin de ce plugin (https://gist.github.com/leemachin/2366832#file-modulo-filter-rb) for it to work:

{% 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 %}
6
répondu Tom 2014-01-09 15:30:08

Essayez celui-ci:

<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>
6
répondu Nigel Greenway 2015-02-07 16:05:32

je devrais vraiment me concentrer sur ce que je fais, mais dur avec une fille d'un an qui me donne tous ses jouets... : D

Le code devrait fonctionner:

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

devrait donner le html de:

<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>
1
répondu Nigel Greenway 2014-01-04 19:55:46

Ok, j'ai fait un essai rapide avec pas de bon style, mais cela devrait fonctionner:

<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>
0
répondu Nigel Greenway 2014-01-04 18:28:04

avec l'aide de @smilinmonki666 j'ai obtenu ce travail comment je le veux aussi, voici le code final que j'ai suivi:

{% 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 %}
0
répondu Tom 2014-01-04 20:26:51

après avoir regardé la solution de Christian, j'ai mis à jour mon code (basé sur pug) pour:

.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                                        %}
0
répondu Dinis Cruz 2017-05-11 22:44:16

vous pouvez le faire avec le cycle balise comme décrit dans https://shopify.github.io/liquid/tags/iteration/

{% for post in site.posts %}
  {% cycle '<div>', '' %}
    <a href="{{ post.url }}">{{ post.title }}</a>
  {% cycle '', '</div>' %}
{% endfor %}

sorties

<div>
  <a href="#">Title</a>
  <a href="#">Title</a>
</div>

<div>
  <a href="#">Title</a>
  <a href="#">Title</a>
</div>
0
répondu planetmik 2018-04-17 14:16:56