Bucles e condicionáis en Jekyll

No artigo anterior vimos como crear prantillas ou compoñentes reutilizables entre as distintas partes da aplicación. Pero isto levábanos a unha estructura ríxida ca que apenas podíamos xogar. Polo que agora imos ver como xogar con bucles e condicións lóxicas para construír o noso sitio. De xeito que dependendo, por exemplo, do valor dunha variable podemos amosar unha cabeceira ou outra.

Así que comecemos.

Bucles

Un bucle é un comando que repetirá o que lle digamos un número de veces baseado na condición que lle indiquemos. Polo que se quixésemos poderíamos crear unha lista de ingredientes, sen ter que estar todo o rato engadindo nós un por un os elementos <li> na web. Poderemos simplemente dicirlle que recorra os ingredientes dunha variable, ou que enumere as etiquetas ou os artigos da nosa web.

Supoñamos este último caso. Queremos crear un listado dos artigos que temos na páxina, o cal ademáis irá medrando co tempo, e non queremos ter que polos a man e ter que actualizar o listado cada vez que publiquemos algo. Pois isto poderemos facelo grazas á variable site de Jekyll, que entre outras cousas contén os posts do noso sitio.

O código sería algo así:

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

A instrucción que inicia o bucle é for despois designamos que variable queremos utilizar. Aquí podemos por o nome que queiramos, pero axuda que reflexe o que imos percorrer. Neste caso como vou tratar con posts pois chámolle post. A continuación indicamos onde ten que buscar estes posts e dicímoslle que os busque entre os artigos da web, accedendo a site e dentro desta a posts.

O que ven na seguinte liña é o corpo da función for, é dicir, aquilo que se vai repetir. Aquí, tantas veces coma artigos teñamos, creará un elemento <li> que conterá un enlace á ruta indicada e co texto indicado. É interesante notar que o que facemos na liña do for é coller o contido de site.posts e un por un metelo na nosa variable post. Ao facer isto, temos ao noso dispor cada propiedade de post. Neste caso para coller o URL ou o título.

Xa con isto temos algo de mellora na estrutura da web, pero segue sendo liñal, non podemos reaccionar a nada e actuar en consecuencia.

Condicionais

Neste apartado imos falar de dous condicionais, if e unless, que nos permitirán que certas partes da plantilla varíen o seu comportamento baseándose en certas condicións.

Por exemplo, supoñamos que queremos dar un saúdo cando o nome dun cliente sexa Pedro, Xan ou un saúdo xenérico en calquer outro caso. Pois faríamolo cunha estrutura como a seguinte.

{% if customer.name == "Pedro" %}
    Ola Pedro!
{% elseif customer.name == "Xan" %}
    Ola Xan!
{% else %}
    Ola estrano!
{% endif %}

Aí podemos ver como de entrada iniciamos co if, que di que se o nome do cliente é Pedro, teremos en conta as liñas que se atopen entre esta liña e o elseif, else ou endif seguintes. Despois o elseif permitenos dicir que se non cumpriu a anterior, pero cumpre esta, executaremos o que vai a continuacióñ. Co else dicimos que se non cumpriu nada do anterior, executaremos esta. Finalmente o endif finaliza este conxunto de condicións.

Esta é unha estrutura de exemplo, pero podemos xogar con distintas combinacións. Por exemplo poderíamos ter tan só o if e o endif que son as obrigatorias. Ou combinalas con varios elseif, etc. As únicas restriccións son que sempre comezaremos por un if, remataremos cun endif e tan só podemos usar un else.

A inversa desta orde if sería o unless, é dicir. Executaríamos as liñas a continuación do unless, salvo no caso de que se cumpra a condición. Seguindo o exemplo de antes, se queremos un saúdo xenérico, salvo no caso de que o cliente sexa Pedro.

{% unless customer.name == "Pedro" %}
    Ola, aínda que non sexas Pedro!!
{% endunless %}

As condicións por suposto poden ser compostas, non teñen por que ser tan só unha. Para isto faríamos uso de or ou and.

Con isto chegamos á fin deste artigo. No seguinte veremos como crear arquivos nos que almacenar datos para ler na páxina. Por exemplo un ficheiro cos clientes para os exemplos anteriores. Serán os datafiles.