Personalizando o noso Jekyll

Por defecto, cando instalamos Jekyll, ven cun tema xa configurado. Este tema é minima, que nos da ese aspecto que vemos a primeira vez que o lanzamos sen facer cambios.

As boas novas son que isto tamén é configurable, así pois tan só teremos que instalar o tema que desexemos dende rubygems e escollelo na nosa configuración, ou sexa no _config.yml.

Instalando temas

Na web de rubygems buscaremos jekyll-theme, que nos devolverá un listado de temas a escoller. Entrando no resultado de queiramos ver, poderemos entrar en homepage e ver un exemplo. Para ver sé se adapta ao que nos queremos.

Unha vez sabemos que tema queremos para o noso sitio, iremos ao noso arquivo Gemfile e debaixo da liña que xa temos, que pon gem "minima", "~> 2.0". Engadiremos o tema que queiramos descargar. Só co nome ou engadindo a versión mínima para traballar.

Xa feito isto iremos ao _config.yml e cambiamos o nome do tema polo que acabamos de instalar. Para que o cambio xurda efecto, temos que reiniciar o servidor de Jekyll.

NOTA: algo moi importante que temos que ter en conta. Unha vez temos instalado o novo tema, revisaremos a carpeta layout. Temos que fixarnos que layouts ten, para ver que soporte os que usamos ou adaptarnos os que soporta. Por exemplo, hai temas que non teñen configuración para posts ou pages e teríamos que adaptarnos.

Para adaptarnos a un tema, que poida non traer os nosos posts ou as nosas pages usaremos as que trae el. Pero outra opción, máis compricada, será adaptar o tema ou crear o noso propio, cos aspectos que queiramos usar.

Para personalizar un aspecto, ou layout, podemos sobreescribilos ou crear os nosos propios. Para isto crearemos unha carpeta _layouts ao mesmo nivel que _posts, onde xeraremos un ficheiro co nome do layout e extensión html. Por exemplo post.html que sustituirá ao actual, cuxo contido pode ser algo coma isto:

<h1>texto xenérico</h1>
<hr>
{{ content }}

Includes

Os includes, que irán dentro da carpeta _includes, son seccións fixas ou reutilizables que non queremos escribir contínuamente. Son fragmentos, como unha cabeceira, que poderemos reutilizar noutras seccións. Seguindo o exemplo da cabeceira, poderíamos ter un ficheiro como header.html ca seguinte estructura.

<h1>{{ site.title }}</h1>

Así poderémolo incluír agora noutro arquivo, coma un layout ca estructura da nosa páxina.

<html>
  <head>
    <title>{{ post.title }}</title>
  </head>
  <body>
    {% include header.html %}
    {{ content }}
  </body>
</html>

Pasando variables de pai a fillo

Se por exemplo cando chamásemos a header o fixésemos deste xeito {% include header.html color="blue" %}, estaríamos envíando a variable color a header. Que sería recollida no seu html como:

<h1 style="color: {{ include.color }}">{{ site.title }}</h1>

Con isto poderemos crear a estructura da nosa web, pero dun xeito moi ríxido. Polo que no seguinte artigo veremos como usar bucles e condicionais nas estructuras, para usar for ou if.