Aprende lo básico para hacer tu primer layout con el framework SSG Eleventy. Aprenderás a crear un primer layout y usarlo desde las páginas markdown, Incluso a pasar datos al layout desde el front matter del markdown.
En el pasado artículo vimos cómo crear un primer proyecto con Eleventy, una sencilla y versátil herramienta para la generación de sitios estáticos (Static Site Generator, conocido también por sus siglas SSG). Fue una buena introducción pero nos quedamos en lo más esencial. Seguramente querrás mejorar la generación del contenido estático por medio de layouts que implementen un diseño en particular y un contenido que no tengas que repetir en cada una de las páginas que realices.
La generación de un layout o plantilla en Eleventy es extremadamente sencilla, así que nos resultará muy rápido conseguirlo. Obviamente a medida que se vayan complicando nuestras necesidades podremos necesitar mayores conocimientos y el uso de características más sofisticadas de 11ty, pero para esta primera introducción al mundo de los layouts mantendremos las cosas lo más simple posible.
Aquí vas a aprender a crear un layouts en Eleventy SSG, abordando los siguientes pasos.
Carpeta para layouts
Eleventy es un generador de sitios estáticos que se adapta a las necesidades de cualquier tipo de proyectos y a cualquier estructura de carpetas. Sin embargo, existen unas convenciones básicas que si respetamos no requerirá ningún tipo de configuración. Una de ellas es la carpeta donde se guardan los layouts que el framework espera que se nombre como "_includes".
Por tanto, para empezar a trabajar vamos a crear un directorio llamado "_includes" en la raíz de nuestro proyecto.
Creando un primer layout en 11ty
Ahora dentro de la carpeta "_includes" vamos a crear un nuevo archivo cuyo nombre puede tener cualquiera que puedas necesitar, ya que en un proyecto podríamos tener perfectamente diversos layouts. De momento para dejar las cosas simples vamos a llamarle "layout.html".
En este punto conviene decir que Eleventy permite trabajar con varios lenguajes de templates, como por ejemplo Handlebars, Nunjucks o Liquid, entre otros. También podemos trabajar con simples archivos html para proyectos básicos, o incluso con JavaScript utilizando los template strings. Es importante mencionar que en Eleventy se usa de manera predeterminada el sistema de templates Liquid.
Por tanto, si tenemos un layout con extensión .html y no hemos realizado ninguna configuración en específico que cambie esto, estaríamos usando Liquid como motor de templates. Por supuesto, también podrías usar la extensión específica de los motores de templates, así ayudarías a 11ty a saber con qué motor de templates debe procesar tu layout. Pero como nuestro layout tiene extensión .html y no hemos configurado nada, se entiende que es un archivo con sintaxis dada por el template system Liquid.
El código de nuestro archivo layout.html podría tener una forma como la siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eleventy layout</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<main>
{{ content }}
</main>
</body>
</html>
Como puedes apreciar se trata de un simple archivo de código HTML. Tiene poco de especial. Lo único remarcable en este archivo es un bloque {{ content }}, que como te puedes imaginar es el lugar donde se volcará el contenido del archivo que se está generando en cada caso.
También es interesante apreciar como existe una declaración de hoja de estilo. Esta hoja de estilo fue creada en el artículo anterior, donde también explicamos cómo copiar el archivo CSS dentro del proyecto generado por 11ty. Consulta el Manual de Eleventy para más información.
Cómo usar este layout en un archivo markdown
Ahora vamos a aprender a utilizar un layout en un archivo markdown, de modo que todo ese código HTML pueda servirnos para el renderizado de las páginas de nuestro sitio estático.
Vamos a ver primeramente el código y enseguida lo explicamos.
---
layout: layout.html
---
# Mi template en Eleventy
Estoy aprendiendo a usar layouts en Eleventy con DesarrolloWeb.com
Esto es un segundo párrafo...
Partes de un archivo markdown para generar contenido en Eleventy
Vamos a ver rápidamente las partes de este archivo que debes reconocer, para irte familiarizando con el modo de trabajo en Eleventy.
Front matter
En este archivo markdown apreciarás como empezamos con una zona de cabecera, en la que se indica alguna información importante que le servirá a Eleventy para saber cómo tiene que renderizar el contenido al general del sitio estático.
Esa zona se delimita por tres guiones medios seguidos (signo menos "-"). Técnicamente a esta zona del markdown donde se informa con datos de cabecera se le llama "front matter" y es habitual en los sistemas de generación de sitios estáticos a partir de markdown.
En este caso simplemente hemos indicado el layout pero podríamos agregarle diversos datos adicionales de control y metadatos que se podrían utilizar en el contenido de la página.
Contenido de la página
El resto del código Markdown que hemos utilizado simplemente consiste en un titular y un par de párrafos. Ese contenido es el que se volcará en el layout donde se había indicado por medio del código {{ content }}.
Todo lo que hay dentro del front matter no se renderizará como contenido. Como decimos, se trata solamente de información de control.
Añadir un título al layout
Ahora vamos a personalizar otro tipo de variables utilizadas frecuentemente a la hora de generar las páginas de un sitio estático mediante markdown. En concreto veremos cómo añadir un título a las páginas, que en layouts.
Comencemos viendo como añadir este título en el front matter de nuestro código markdown.
---
layout: layout.html
title: Agregando un título a esta página
---
Simplemente hemos utilizado la variable title y le hemos asignado un texto arbitrario.
Utilizar esta variable title dentro de un template sería tan inmediato como colocar el nombre de la variable entre dos llaves. Veamos cómo:
<title>{{ title }}</title>
Cómo asignar un título predeterminado
El problema con esta configuración puede surgir si en alguna de las páginas Markdown generadas omitimos el título dentro del front matter. En ese caso nuestro layout no tendría nada que mostrar y la página aparecería sin título.
Para solucionar esta posible situación podemos añadir un "default" en el código del layout, de la siguiente manera.
<title>{{ title | default: "Eleventy layout" }}</title>
Esta variable title la podemos utilizar también dentro del <body> del documento, Por ejemplo para reutilizar esta declaración dentro del <H1>. De este modo podemos evitar colocar los titulares en el contenido de las páginas del sitio.
Ahora el código completo de nuestra plantilla HTML se vería así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title | default: "Manual Eleventy" }}</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<h1>{{ title | default: "Manual Eleventy" }}</h1>
<main>
{{ content }}
</main>
</body>
</html>
Ahora los archivos marca down lucirían de esta manera:
---
layout: layout.html
title: Mi template en Eleventy
---
Estoy aprendiendo a usar layouts en Eleventy con DesarrolloWeb.com
Esto es un segundo párrafo...
Simplemente puedes verificar que hemos eliminado la parte de contenido "# Mi template en Eleventy", ya que ahora mismo ese titular lo mostraríamos directamente en el layout.
Conclusión
En este artículo hemos aprendido a utilizar templates sencillos generados en archivos HTML. Es sólo una de las muchas posibilidades de creación de layouts que nos ofrece Eleventy.
Has visto qué sencillo es agregar información de control a los documentos Markdown mediante el front matter. Gracias a esos datos de cabecera podemos indicar cosas como el layout que debe utilizar para renderizar el contenido o datos importantes como el título de la página actual.
En futuros artículos seguiremos aprendiendo cosas sobre 11ty este potente generador de sitios estáticos, para sacarle mayor partido y poder configurar otras funcionalidades frecuentes para sitios web.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...