Jekyll: Usar Archivo de Datos
¿Para qué sirve la carpeta _data?
Es una carpeta especial que Jekyll reconoce automáticamente. Todo lo que pongas ahí queda disponible para que lo uses en cualquier parte del sitio.
Es como tener una mini base de datos, pero hecha con archivos simples como
.yml,.jsono.csv, que puedes consultar desde cualquier parte de tu sitio.
¿Para qué sirve en la práctica? Para separar el contenido repetitivo y estructurado del resto del sitio. Algunos ejemplos comunes:
- Miembros del equipo (
team.json) - Proyectos (
portfolio.yml)
1. Crear un proyecto Jekyll
Si aún no tienes un sitio Jekyll andando, crea un proyecto básico:
1
2
jekyll new equipo-demo --blank
cd equipo-demo
Dentro del proyecto, usamos Bundler para generar un Gemfile, y luego añadimos Jekyll como dependencia para gestionarlo correctamente:
1
2
bundle init
bundle add jekyll
Una vez instaladas las dependencias, usa Bundler para construir el proyecto y servirlo en local:
1
bundle exec jekyll serve
Eso va a levantar tu sitio en http://localhost:4000.
2. Usar un archivo de datos
Dentro del proyecto, busca la carpeta _data:
Y dentro de ella, creá un archivo llamado team.yml:
1
2
3
4
5
6
7
8
9
10
11
- nombre: Ana González
rol: Diseñadora UX
github: anitaux
- nombre: Pedro Soto
rol: Frontend Dev
github: pedrodev
- nombre: Lucía Reyes
rol: Project Manager
github: luciareyes
3. Crear una página que use esos datos
En la raíz del proyecto, crea un archivo equipo.md y pega lo siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
layout: default
permalink: /equipo/
---
# Nuestro Equipo
<ul>
{% for persona in site.data.team %}
<li>
<strong>{{ persona.nombre }}</strong> — {{ persona.rol }}<br/>
GitHub: <a href="https://github.com/{{ persona.github }}" target="_blank">@{{ persona.github }}</a>
</li>
{% endfor %}
</ul>
Jekyll expone este archivo como
site.data.team, lo que nos permite recorrer sus miembros en lugar de escribir cada uno a mano.
Ahora ve al sitio en http://localhost:4000/equipo.
4. Crear una navegación con _data
Hasta ahora usamos la carpeta _data para mostrar el equipo, pero también la podemos usar para manejar algo tan básico como el menú de navegación del sitio. Esto te permitirá agregar, quitar o cambiar enlaces sin tener que meterte a modificar el HTML del layout.
Crea un archivo llamado _data/navigation.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[
{
"name": "Inicio",
"url": "/"
},
{
"name": "Equipo",
"url": "/equipo/"
},
{
"name": "Blog",
"url": "/blog/"
},
{
"name": "Contacto",
"url": "/contacto/"
}
]
En tu layout principal, recorremos los datos así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>{{ page.title }} - {{ site.title }}</title>
<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
</head>
<body>
<nav>
{% for item in site.data.navigation %}
<a href="{{ item.url }}"
{% if page.url == item.url %}style="color: red;"{% endif %}>
{{ item.name }}
</a>
{% endfor %}
</nav>
{{ content }}
</body>
</html>
El uso es idéntico al de YAML porque Jekyll interpreta automáticamente el formato de los archivos
.json,.ymlo.csv. Lo importante es que esté en la carpeta_data.
Y así como hicimos con el equipo y la navegación, puedes seguir organizando contenido en la carpeta _data.
Ideal para:
- Sitios multilingües
- Portafolios (proyectos, servicios, etc.)
- Blogs con categorías o autores personalizados
- Listados dinámicos que quieres mantener en un solo lugar