#Includes en Liquid
En Liquid podemos crear bloques o ‘Snippets’ dinámicos que permitan modificar el contenido, clases o cualquier contenido según sea necesario.
Por ejemplo una alerta:
Snippet “alerta”
<div class=”alert”>Esta es mi alerta</div>Luego lo incluimos en nuestra plantilla como:
{% snippet “alerta” %}
Nos dará como resultado:
<div class=”alert”>Esta es mi alerta</div>Si queremos una alerta “danger” podemos hacer lo siguiente:
Snippet “alerta”
<div class=”alert {{ class }}”>Esta es mi alerta</div>Luego lo incluimos en nuestra plantilla como:
{% include “alerta”, class:”alert-danger” %}
Notar el reemplazo de la palabra ‘snippet’ por ‘include’.
Nos dará como resultado:
<div class=”alert alert-danger”>Esta es mi alerta</div>Lo interesante es que si no le damos valor a ‘class’ simplemente no agregará nada a la clase. Ej:
{% include “alerta” %}
Imprime:
<div class=”alert ”>Esta es mi alerta</div>Otra funcionalidad interesante de ‘include’ versus ‘snippet’ es la posibilidad de incluir snippets dinámicamente.
Ejemplo:
Snippet ‘modulo’
<div class=”modulo”>
{% snippet submodulo %}
</div>Snippet ‘submodulo1’
<div class=”submodulo1”> Este es el contenido de submodulo 1</div>Snippet ‘submodulo2’
<div class=”submodulo2”> Este es el contenido de submodulo 2</div>Entonces llamamos al snippet de módulo referenciando submodulos.
{% include “modulo”, submodulo:”submodulo1” %}
Imprime:
<div class=”modulo”>
<div class=”submodulo1”> Este es el contenido de submodulo 1</div>
</div>{% include “modulo”, submodulo:”submodulo2” %}
Imprime:
<div class=”modulo”>
<div class=”submodulo2”> Este es el contenido de submodulo 2</div>
</div>Ojo que aquí es necesario entregar una variable con un nombre válido de snippet o Liquid nos devolverá error.
Si queremos dejar ese campo como opcional, debemos poner un condicional en el snippet.
Snippet ‘modulo’
<div class=”modulo”>
{% if submodulo %}
{% snippet submodulo %}
{% endif %}
</div>Así al llamar:
{% include “modulo” %}
Imprime
<div class=”modulo”>
</div>