Creando una plantilla para Jekyll

Las plantillas en Jekyll son equivalentes a los themes de Wordpress. Pero crearlas en Jekyll es un proceso mucho más sencillo.

Logo de Jekyll

Para empezar, hay que entender cómo funciona internamente Jekyll.

Todo gira, en principio, a dos variables globales que vamos a utilizar constántemente. Todas las plantillas tienen acceso a una variable de objeto global del sitio: site, así como una variable de objeto de página: page. La variable site alberga todos los contenidos accesibles y metadatos con relación al sitio. La variable de page contiene los datos accesibles para la página determinada o post al que se aplicará una plantilla determinada.

Las plantillas deben ser codificados en HTML aunque pueden contener código Liquid que nos permitirá acceder a datos e iterar con ellos.

<body>
  <div id="sidebar"> ... </div>
  <div id="main">
    {%content%}
  </div>
</body>

En el ejemplo anterior he usado una variable que no he mecionado: content. Esta variable símplemente mantiene el contenido de la página o post.

Subplantillas

Uno de los mecanismos que permite utilizar Jekyll es el de las subplantillas. Esto es, anidar las plantillas unas dentro de las otras. Por ejemplo, podemos crear una plantilla para la Home de nuestra web, formada a su vez por una subplantilla para el encabezado y otra subplantilla para el footer.

{% include header.html %}

Entendido esto, lo importante es saber que una plantilla de Jekyll se compone de *layouts* que a su vez se componen de sub-estructuras que se almacenarán en una carpeta llamada _includes.

<div class="container">
  {{ content  }}
</div>

{% include footer.html  %}


Directorio includes

Los ficheros que se ponen en la carpeta includes en realidad son trozos de código que pueden ser literalmente insertados en algún lugar de una página o plantilla, y es lo que hasta ahora he llamado subplantillas.

Las partes más comunes son los include del encabezado, los meta y el footer de tu sitio, pero hay muchas más posibilidades en función del diseño que estés tratando de lograr. Puedes implementar una columna lateral, una sección de publicaciones recientes, vcard, etc...

La forma de montar estos trozos sobre la plantilla (layout) es la siguiente:

{% include header.html %}

<div class="container">
  {{ content  }}
</div>

{% include footer.html %}


Con todo esto, crearemos los layout

En la carpeta _layous podemos introducir los diseños de los distintos tipos de páginas de nuestra plantilla general. Por ejemplo, podemos tener un layout para la página donde están los artículos, otro para la página donde ponemos nuestra biografía, etc.

Observa que con código Liquid y marcadores de posición utilizando las etiquetas de doble llave, podemos crear fácilmente estructuras muy sencillas de mantener:


<!DOCTYPE html>
<html lang="es">

    {% include head.html %}

    {%  include header.html %}

    <body>

    {{ content  }}

    {% for post in paginator.posts %}
      {% include article.html %}
    {% endfor %}
    </body>

    {%  include footer.html %}
</html>

Como véis, el proceso para crear una web en Jekyll pasa por hacer primeramente un diseño de la misma en html y luego estructurarla en layouts que a su vez se estructuran en partes comunes que guardamos en la carpeta _includes.

Lo demás, funciona exactamente igual que en una web construida en html: podemos crear en el directorio principal carpetas y ficheros con elementos estáticos como javascript, CSS o imágenes.