Lo que he aprendido: activar elementos en la barra de navegación en Jekyll

Sigo mejorando la web de pan, esta vez he hecho que los elementos de la barra de navegación cambien de color dependiendo de dónde estemos. Os cuento cómo.

Lo primero a tener en cuenta si usamos GitHub Pages como yo hago es el tema de las direcciones. Como nos cuentan aquí debemos añadir {{site.github.url}} delante de nuestras direcciones. Esto ocurre porque para Jekyll la dirección base es usuario.github.io pero si estamos usando una página de proyecto, esta dirección es en realidad usuario.github.io/proyecto y nos la lía.

Sabiendo esto, he adaptando lo que nos cuentan aquí para el caso de GitHub Pages y lo he añadido a _layouts/default.html, sustituyendo a la barra de navegación que tenía:

Esto compara la dirección de cada elemento en la barra de navegación (p.url) con la dirección en la que estamos (page.url) y si son iguales activa el elemento.

He tenido que crear, claro, la clase active en el CSS, que simplemente cambia de color el texto:

a.active {
    color: darkred;
}

Lo único que queda ahora es añadir en el bloque YAML inicial de cada página la posición en la barra de navegación, para eso usamos navigation_weight y un número que indica la posición, por ejemplo:

---
layout: default
navigation_weight: 1 
---

En el repo podéis ver cómo hacía la barra de navegación antes (lo comentado) y ahora, con lo que acabo de aprender. La verdad es que es bastante más cómodo que ir poniendo los enlaces uno a uno y eso que lo que yo había hecho no cambiaba de color ni nada.

Espero que os resulte útil.

Referencias

Navigation in Jekyll

Variables en la docu de Jekyll

GitHub Pages en la docu de Jekyll

Anuncios

3 pensamientos en “Lo que he aprendido: activar elementos en la barra de navegación en Jekyll

  1. Pingback: Compilación: GitHub Pages y Jekyll | Onda Hostil

  2. Pingback: En qué ando: segunda quincena de enero | Onda Hostil

  3. Pingback: Lo que he aprendido: Font Awesome y Jekyll | Onda Hostil

¡Opina sin miedo! (Puedes usar Markdown)

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s