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?
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!
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.
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 %}
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>
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>
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>
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 %}
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 %}
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>