Módulo (o la falta del mismo) en motor de plantillas Liquid de Ruby

Question

Estoy trabajando en un sitio Jekyll y estoy tratando de salida de tres divs columnas anidadas en un div fila. hace que este bastante fácil con su filtro de cycle:

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

Sin embargo, esto sólo funciona cuando hay 3, 6, 9, etc. puestos. Cuando el número total de mensajes no es un múltiplo de tres, el <div class="row"> nunca se cerró -. El bucle finaliza antes de la etiqueta de cierre puede ser de salida como parte del ciclo close rows

En Ruby, PHP, o cualquier otro lenguaje que fácilmente podría solucionar este problema con un operador de módulo, lo que además de close rows ciclo lo haría </div> salida cuando if site.categories.size % 3 == 0. Sin embargo, Líquido, porque es un lenguaje de plantillas de seguridad, no es compatible con el módulo.

¿Qué más puedo hacer para cerrar correctamente <div class="row"> cuando el número total de mensajes no es un múltiplo de tres?

Answer 1

Para su ejemplo específico, se puede utilizar después de la {% cycle 'close rows': nil, '</div>', '</div>' %} {% endfor %}.

Answer 2

He encontrado esta manera de trabajar muy bien!

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

Answer 3

La única manera de que ahora es escribir un filtro de líquido para lograr esto. Registre el filtro en algún lugar de su código donde es apropiado (que se encuentra en diferentes lugares si se utiliza con los carriles y sin ellos).

  

Liquid :: Template.register_filter (LiquidFilters)

En ustedes proyectos / lib añadir liquid_filters.rb:

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

Después de que usted puede utilizarlo como siguiente en sus plantillas: {{Variables | mod: 5}}

Y si hay que usarla para algo de lógica que puede capturar el valor.

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

Sólo me he dado cuenta de que el valor capturado es una cadena para el fin de compararla que utilizar

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

Answer 4

utilicé otro truco en un bucle for:. Inútil en su caso, útil si lo que desea es un módulo con el fin de averiguar si su línea ha terminado y que necesita una nueva fila, como lo hice

En este ejemplo voy a ir con una línea de 4 elementos:

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

No es muy agradable, pero fácil.

Answer 5

Me doy cuenta de la pregunta ha sido resuelto por el autor de la pregunta, pero recientemente me encontré con este tipo de situación en líquido y pensé que proporciono mi solución en caso de que ayuda a alguien con los requisitos de marcado similares.

En mi caso, yo ya he pasado una sentencia if verificar que existe al menos un puesto, así que creé la primera div "fila" fuera del bucle. También lo cierro tras el bucle. Esto protege contra un caso en el que hay menos de tres puestos.

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

Después de cada tres puestos de trabajo, el ciclo se cerrará la fila actual y abrir una nueva unless el puesto era el último en la forloop, en cuyo caso no queremos abrir una nueva fila, y dejar que la envoltura </div> cerrar para arriba.

Answer 6

He aprendido mucho de este post, y estos son tres patrones que utilicé durante mi proyecto. Se trabajó mucho con Bootstrap también. Sólo cambia la clase de la columna en el siguiente código. En lugar de las columnas, los mismos patrones se pueden aplicar a otros escenarios en los que modulo es útil, tales como filas par-impar. Espero que ayude a alguien -

Cuatro columnas:

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

Tres columnas:

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

Dos columnas:

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

Answer 7

IIRC líquido no bloquea la operación de módulo, sólo el carácter %. Puede realizar un módulo sin necesidad de utilizar el operador %. Por ejemplo, en lugar de 14.modulo(3) => 2 14 % 3.