Apuntes Jekyll

← Desarrollo de funcionalidades Complementos Jekyll →
Tabla de contenido 📄

Front Matter

El Front Matter es un fragmento de YAML que se encuentra entre dos líneas de tres guiones (-) en la parte superior de un archivo. Una de las cosas que podemos establecer en este fragmento son variables para página. Por ejemplo:

index.html 


1
2
3



---
num: 5
---

Estas variables preliminares están disponibles en Liquid en la variable page. Por ejemplo, para acceder a la variable anterior, usaríamos:

index.html 


1



<p>{{ page.num }}</p>

Includes

La etiqueta {% include %} permite incluir contenido de otro archivo almacenado en la carpeta :file_folder: _includes. Las inclusiones son útiles para tener una única fuente de código que se repite en todo el sitio o para mejorar la legibilidad.

Un ejemplo de lo anterior podría ser la navegación, a veces es mejor moverlo a una inclusión.

Creamos un archivo en _includes/navigation.html:

  • 

    1

    		

    touch _includes/navigation.html

    		

  • 

    1

    		

    type null > _includes/navigation.html

Agregamos el siguiente código para el ejemplo:

navigation.html 


1
2
3
4



<nav>
  <a href="/">Home</a>
  <a href="/about.html">About</a>
</nav>

Dentro del archivo _layouts/default.html lo incluimos de la siguiente manera:

default.html 


1
2
3
4
5
6
7
8
9
10
11
12



<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Apuntes Jekyll</title>
  </head>
  <body>
    <!-- 👇 -->
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

Archivo de datos

Además de las variables integradas disponibles de Jekyll, podemos crear nuestros propios datos personalizados en los siguientes formatos:

Crear un archivo en _data/navigation.yml:

  • 

    1

    		

    touch _data/navigation.yml

    		

  • 

    1

    		

    type null > _data/navigation.yml

Y agregamos lo siguiente:

navigation.yml 


1
2
3
4



- name: Home
  link: /
- name: About
  link: /about

Jekyll pone este archivo de datos a su disposición a través de site.data.navigation. En lugar de generar cada enlace, podemos iterar sobre los datos:

index.html 


1
2
3
4
5



<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}">{{ item.name }}</a>
  {% endfor %}
</nav>

Nota: la salida será exactamente la misma. La diferencia es que ha facilitado la adición de nuevos elementos de navegación.

Colecciones de Jekyll

Las colecciones en Jekyll son similares a las publicaciones que creamos en la carpeta _post. Entonces, ¿cuál es la diferencia?. Aquí un resumen simple:

  • Utilizar publicaciones cuando se desea escribir artículos independientes, con fecha de publicación.
  • Utilizar colecciones cuando se desea agrupar contenido relacionado, que pueda tener su propia página, pero la fecha no es importante.

Crear una colección en Jekyll

Para utilizar una colección, primero debemos definirla en el archivo _config.yml. Por ejemplo, aquí una colección de gatos en dos ejemplos distintos:



1
2



collections:
  - gatos





1
2
3



collections:
  gatos:
    output: true

Nota: al definir una colección como una matriz, sus páginas no se representarán de forma predeterminada. Para habilitar esto, se debe especificar output: true en la colección.

Ahora podemos agregar documentos detro de la carpeta _gatos (importante el guión bajo al comienzo).

Usando las colecciones

Ahora que tenemos nuestra colección configurada, podemos usarla. Para este ejemplo, lo mostraremos en una vista de galería. Para ello creamos un archivo llamado galeria.html en la raíz del sitio, con la siguiente portada (front matter):



1
2



layout: default
title: Galería

Ahora todo lo que tenemos que hacer es recorrer nuestra colección, que se ha convertido en una variable global en site en nuestro archivo _config.yml. Para comenzar, agregamos el siguiente contenido debajo del front matter:

galeria.html 


1
2
3
4



{% for gato in site.gatos %}
  <img src="{{ gato.image }}" alt="{{ gato.image_alt }}">
  <span>{{ gato.description }}</span>
{% endfor %}

Ahora podemos ver las imágenes en nuestra galería.

Colecciones como páginas

También es posible generar los elementos de nuestra colección como páginas independientes. Para ello, necesitamos hacer tres cosas:

  • Agregar la clave output: true dentro de la colección en el _config.yml
  • Crear una layout para mostrar cada item de la colección
  • Cambiar de layout para la colección que desea usar

Agrupar colecciones

Desde la versión 3.7.0 de jekyll es posible almacenar todas las colecciones en un mismo lugar usando la siguiente configuración:

_config.yml 


1



colecttions_dir: mi_coleccion

Estos nos permite organizar nuestras colecciones con la siguiente estructura:



1
2
3
4
5



mi_coleccion/
  _coleccion1/
  _coleccion2/
  _coleccion3/
  _coleccion4/

Filtros liquid

Los filtros cambian la salida de un objeto de Liquid. Se utilizan dentro de una salida y están separados por carácter de pipe (|).

Transformación string

  • 

    1
2
3
4

    		

    {% comment %} Comentarios {% endcomment %}
{{ "hola" | capitalize }}
{{ "Hola" | dowcase }}
{{ "hola" | upcase }}

    		

  • 

    1
2
3
4

    		

    Hola
Hola
HOLA

Usar múltiples filtros

  • 

    1

    		

    {{ "hola" | upcase | remove: 'HO' }}

    		

  • 

    1

    		

    LA

Tamaño

  • 

    1
2
3

    		

    {% assign frutas = "naranja,manzana,sandía" | split: ',' %}
{{ frutas | size }}
{{ 'frutas' | size }}

    		

  • 

    1
2
3

    		

    3
6

Notación de puntos

  • 

    1
2
3
4

    		

    {% assign frutas = "naranja,manzana,sandía" | split: ',' %}
{% if frutas.size <= 3 %}
  Hay poca variedad de frutas
{% endif %}

    		

  • 

    1
2
3
4

    		

    
  Hay poca variedad de frutas

where

array | where : string, string



1
2
3
4
5
6
7



{% assign my_posts = site.posts | where:"author","enidev911" %}
<ul>
  {% for post in my_posts %}
  <li><a href="{{post.url}}">{{post.title}}</a></li>
  {% endfor %}
</ul>
{% comment %} Renderiza solo si el author del post es 'enidev911' {% endcomment %}

escape

  • 

    1

    		

    {{ '<p>Lorem ipsum...</p>' | escape }}

    		

  • 

    1

    		

    &lt;p&gt;Lorem ipsum...&lt;/p&gt;

Ordenamiento

sort

Primero ordenaremos una colección o lista como las publicaciones y luego la mostraremos con un bucle for:



1
2
3
4



{% assign sorted-posts = site.posts | sort: 'title' %}
{% for post in sorted-posts limit: 5 %}
  <li>{{post.title}}</li>
{% endfor %}

sort | reverse

Podemos organizarlo en orden inverso de los títulos



1
2
3
4



{% assign sorted-posts = site.posts | sort: 'title' | reverse %}
{% for post in sorted-posts limit: 5 %}
  <li>{{post.title}}</li>
{% endfor %}

Filtros

join

Combina los elementos de una matriz en una sola cadena usando un argumento separador:

  • 

    1
2

    		

    {% assign authors = "enidev911, neck, darkonen" | split: ", " %}
{{ authors | join: " and "}}

    		

  • 

    1
2

    		

    enidev911 and neck and darkonen
← Desarrollo de funcionalidades Complementos Jekyll →