jekyll - site - Para bucle, envuelve cada dos mensajes en un div

liquid tutorial

Question

Básicamente, estoy usando Jekyll (que usa el lenguaje de plantillas Liquid ) y estoy tratando de escribir un bucle for que envuelve cada dos elementos en un div .

Este es mi bucle actual:

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

Lo que daría como resultado cuatro publicaciones como esta:

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

Mi salida deseada para cuatro publicaciones es:

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

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

¿Cómo puedo lograr esto?

Answer 1

Acabo de encontrar esto ( gist.github.com/leemachin/2366832 ) que es una solución mucho mejor que las publicadas en otras respuestas, teniendo en cuenta que necesitará este complemento ( https://gist.github.com/leemachin/2366832#file-modulo-filter-rb ) para que funcione:

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

Answer 2

Con la ayuda de @ smilinmonki666, he conseguido que esto funcione, y aquí está el código final con el que fui:

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

Answer 3

Después de ver la solución de Christian, actualicé mi código (basado en pug) para:

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

Answer 4

Ok, he hecho un intento rápido sin un estilo adecuado, pero esto debería funcionar:

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

Answer 5

Prueba este:

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

Answer 6

Puede hacer esto con la etiqueta de cycle como se describe en https://shopify.github.io/liquid/tags/iteration/

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

salidas

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

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

Answer 7

Realmente debería concentrarme en lo que estoy haciendo, pero duro con una niña de un año que me da todos sus juguetes ...: D

El código debería funcionar ahora:

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

Debe dar el 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>

Answer 8

Sé que llego tarde al juego, pero encontré que lo que siento es una solución bastante elegante que no se siente mal.

Con los parámetros de limit y offset bucle, podemos iterar una fila a la vez, N publicaciones por fila.

Primero, contamos el número de filas que necesitaremos enumerar:

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

El equivalente de Ruby sería rows = (posts.size / 2.0).ceil (los números impares obtienen su propia fila).

A continuación, vamos a iterar sobre las filas:

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

Ahora necesitamos calcular el desplazamiento de la colección con (i - 1) * 2 (utilizando forloop.index0 ):

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

Luego podemos iterar sobre la porción de publicaciones que comienzan en el desplazamiento de la fila (equivalente a las posts[offset, 2] en Ruby):

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

Cierre el elemento div fila y para bucle:

  </div>
{% endfor %}

¡Eso es!

En Ruby, esto sería:

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

Todos juntos ahora, en Liquid:

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

¡Espero que esto ayude a alguien!

Answer 9

Si el número de <div> sy publicaciones es fijo (lo que parece ser el caso en función de la respuesta que seleccionó) , hay una manera más corta de obtener la misma salida: usando limit y offset :
(Enfoque de Liquid para la paginación)

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

Aún mejor solución:

Si el número de publicaciones no es fijo (por lo tanto, cuando tiene 100 publicaciones, quiere 50 <div> s con dos publicaciones cada una) , entonces puede usar forloop.index (que ya se mencionó en la mayoría de las otras respuestas) , y use modulo para averiguar si el índice actual es par o impar:

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

Esto también devuelve la salida deseada, pero funciona para cualquier cantidad de publicaciones.