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