web-dev-qa-db-fra.com

Pour la boucle, envelopper tous les deux messages dans un div

Fondamentalement, j'utilise Jekyll (qui utilise le langage de modélisation Liquid ) et j'essaie d'écrire une boucle for qui enveloppe tous les deux éléments dans une div.

Ceci est ma boucle actuelle:

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

Ce qui produirait quatre posts comme ceci:

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

Ma sortie souhaitée pour quatre articles est:

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

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

Comment puis-je accomplir cela?

jekyllliquid
24
Tom

Je sais que je suis en retard pour le jeu mais j'ai trouvé ce que je considère être une solution assez élégante qui ne se sent pas hacky.

Avec les paramètres for et limit de offset loop, nous pouvons itérer une ligne à la fois, N messages par ligne.

Premièrement, nous comptons le nombre de lignes que nous devrons énumérer:

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

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

Ensuite, nous allons parcourir les lignes:

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

Nous devons maintenant calculer l’offset de collection avec (i - 1) * 2 (en utilisant forloop.index0):

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

Ensuite, nous pouvons parcourir la tranche d'articles en commençant par le 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 %}

Fermez la ligne div et la boucle for:

  </div>
{% endfor %}

C'est tout!

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 maintenant, en 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 aide quelqu'un!

12
Matt Todd

Si le nombre de <div>s et de posts est fixe (ce qui semble être le cas en fonction de la réponse que vous avez sélectionnée)}, il existe un moyen plus rapide d'obtenir le même résultat - en utilisant limit et offset:
(approche de Liquid en matière de radiomessagerie)}

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

Encore meilleure solution:

Si le nombre de messages n'est pas fixé (si vous avez 100 messages, vous voulez 50 <div>s avec deux messages chacun)} _, vous pouvez utiliser forloop.index(qui était déjà mentionné dans la plupart des autres réponses)}, et utilisez modulo pour savoir si l'index 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 %}

Ceci retourne également le résultat souhaité, mais fonctionne pour tout nombre de messages.

33
Christian Specht

Essaye celui-là:

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

Je viens de découvrir ceci ( https://Gist.github.com/leemachin/2366832 ), qui est une bien meilleure solution que celles affichées dans d'autres réponses. N'oubliez pas que vous aurez besoin de ce plugin ( https://Gist.github.com/leemachin/2366832#file-modulo-filter-rb ) pour que cela fonctionne:

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

Je devrais vraiment me concentrer sur ce que je fais, mais durement avec une fille d'un an qui m'a donné tous ses jouets ...: D

Le code devrait maintenant 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 code 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
Nigel Greenway

Ok, j'ai fait un essai rapide sans style mais cela devrait marcher:

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

Avec l’aide de @ smilinmonki666, j’ai obtenu le même résultat, voici le code final avec lequel je suis allé:

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

Vous pouvez le faire avec la balise cycle 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 %}

les sorties

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

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

Après avoir examiné la solution de Christian, j'ai mis à jour mon code (basé sur un carlin) 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
Dinis Cruz