Creando una sección para el blog en el tema Minimal Mistakes

6 minuto(s) de lectura

Si vamos a emplear el tema Minimal Mistakes para un sitio web que se limite a un blog personal, me parece maravilloso tal y como vienen organizadas las páginas por defecto en dicho tema. No obstante, si el mencionado blog únicamente va a ser una sección más, opino que mostrar completamente su contenido en la página de inicio le confiere un protagonismo mayor del que sería deseable.

Así pues, en el presente artículo exploraremos cómo desplazar el índice de entradas, que actualmente figura en la página de inicio, a una sección propia del sitio que, en un alarde de infinita originalidad, denominaremos “Blog”. En una futura entrada de la serie estudiaremos cómo generar una página de presentación utilizando la plantilla splash que proporciona el tema Minimal Mistakes.

Para empezar, acudamos al directorio donde hayamos almacenado localmente nuestra página web y, en su raíz, creemos una nueva carpeta, cuyo nombre será blog (sí, mi originalidad anda en niveles ínfimos hoy). En su interior vamos a generar un archivo, index.html, con nuestro editor de texto plano favorito, con el contenido que se muestra acto seguido:

---
layout: home
author_profile: true
---

Es decir, vamos a utilizar la plantilla (layout) home del tema Minimal Mistakes para mostrar el índice de entradas de nuestro blog. Además, al haber configurado como true el atributo asociado a author_profile, aparecerá, en todo momento, una barra lateral en la parte izquierda mostrando la información asociada al autor del sitio web que proporcionamos el otro día al rellenar ciertos campos del fichero _config.yml.

Precisamente, el siguiente paso consiste en llevar a cabo algunas modificaciones en el mencionado archivo _config.yml. Nos desplazaremos hasta la sección encabezada por # Outputting que, a día de hoy, presenta el siguiente aspecto:

# Outputting
permalink: /:year/:month/:day/:title/
paginate: 5 # amount of posts to show
paginate_path: /page:num/
timezone: # http://en.wikipedia.org/wiki/List_of_tz_database_time_zones

A continuación:

  • Modificaremos la línea asociada al permalink de los artículos del blog, antecediendo el valor que figura con /blog, por coherencia con la estructura que tendrá nuestro sitio web ahora.
  • Actuaremos de manera similar para la línea correspondiente a paginate_path, para que así el índice de entradas posea una url acorde con la nueva organización de la página.

De esta forma, el anterior bloque de instrucciones queda como sigue:

# Outputting
permalink: /blog/:year/:month/:day/:title/
paginate: 5 # amount of posts to show
paginate_path: /blog/page:num/
timezone: # http://en.wikipedia.org/wiki/List_of_tz_database_time_zones

Opcionalmente, podemos configurar ahora también el número de entradas que se mostrarán en cada una de las páginas del índice del blog, cuyo valor es 5 por defecto, tal y como figura en la línea asociada a paginate.

Si en este momento revisamos localmente el sitio web comprobaremos que, efectivamente, el contenido del blog ha desaparecido de la página de inicio de nuestro sitio, cumpliéndose así nuestro objetivo. Eso sí, ahora tenemos que resolver un pequeño inconveniente: ¡no hay forma humana de acceder al mencionado contenido del blog¡

Para solventar esta poco deseable situación, añadiremos un enlace a la sección que alberga el blog en el menú que aparece en la parte superior derecha de la página. La organización de dicho menú se controla desde el archivo navigation.yml, ubicado en la carpeta _data, que, tras la instalación del tema Minimal Mistakes, presenta el siguiente contenido:

# main links
main:
  - title: "Quick-Start Guide"
    url: https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/
  # - title: "About"
  #   url: https://mmistakes.github.io/minimal-mistakes/about/
  # - title: "Sample Posts"
  #   url: /year-archive/
  # - title: "Sample Collections"
  #   url: /collection-archive/
  # - title: "Sitemap"
  #   url: /sitemap/

Vamos a eliminar el enlace existente a parte de la documentación oficial, incluir uno que apunte a nuestro blog y, de paso, escribir un comentario (usando el símbolo #) más informativo que anteceda el bloque de instrucciones. Esta última acción la llevaremos a cabo porque será en el archivo navigation.yml donde recogeremos todos y cada uno de los distintos menús de navegación que el sitio web incorpore. Si no vamos comentando de manera clara el cometido de cada uno de los bloques, será cada vez más complicada su gestión a medida que la página crezca.

Así pues, el anterior bloque de instrucciones, con las modificaciones comentadas arriba, al final queda como se muestra a continuación:

#
# Enlaces del menú de navegación superior derecho
#
main:  
  - title: "Blog"
    url: /blog/

Nota: es recomendable que cada vez que llevemos a cabo ediciones tanto del archivo _config.yml, como del fichero navigation.yml, lancemos de nuestro la versión local del sitio web, para que los cambios se actualicen de manera adecuada.

Tras todas las modificaciones, la página presenta el siguiente aspecto:

Aspecto del índice del blog

Aspecto de una entrada en el blog

Aspecto de la página de inicio

El siguiente paso va a consistir en incorporar una mejora visual al índice de entradas del blog, utilizando para ello una imagen de cabecera que figurará en la parte superior de la mencionada sección. En mi caso, he estado navegando por un banco de imágenes gratuitas y, no sin invertir una buena cantidad de tiempo, finalmente he seleccionado una, la he descargado y renombrado como top-photo, para acto seguido ubicarla en el directorio \assets\images\blog_images\ (que, por supuesto, tenemos que crear de forma manual).

A continuación, editamos el fichero index.html asociado a nuestro blog (y que, recordemos, sigue ubicado en la carpeta blog) y modificamos su contenido de

---
layout: home
author_profile: true
---

a

---
layout: home
title: "Blog"
author_profile: true
header:
  overlay_color: "#000"
  overlay_filter: "0.5"
  overlay_image: /assets/images/blog_images/top-photo.jpg
excerpt: "*Pensando para escribir, escribiendo para pensar.*"
---

donde:

  • Los valores asociados a layout y author_profile se mantienen invariantes.
  • Añadimos, mediante title, un título para la página ("Blog" en esta ocasión), porque, de otra forma, al ser la plantilla asociada a la página de inicio, el valor por defecto para este atributo sería el título de la página web (Infinitos Contrastes en mi caso).
  • Utilizando el atributo excerpt conseguimos incluir una especie de subtítulo para nuestra nueva sección.
  • Finalmente, el bloque encabezado por header gestiona la propia imagen de cabecera que aparecerá en esa página en concreto. Tenemos a nuestra disposición diversas opciones de configuración para dicha imagen, como la posibilidad de incluir filtros de colores, de opacidad, etc. Para más detalles al respecto, podemos consultar esta entrada que el autor del tema ha escrito al respecto.

Por último, me resultaba extraño que todas y cada una de las páginas del índice de entradas del blog fuesen encabezadas por la frase “Entradas recientes”, por lo que decidí eliminar dicha parte. Para ello, no tenemos más que editar el archivo home.html, ubicado en el directorio _layouts, de manera que sustituyamos su contenido original:

---
layout: archive
---

<h3 class="archive__subtitle">{{ site.data.ui-text[site.locale].recent_posts | default: "Recent Posts" }}</h3>

{% for post in paginator.posts %}
  {% include archive-single.html %}
{% endfor %}

{% include paginator.html %}

por el siguiente bloque de instrucciones:

---
layout: archive
---

<!-- [Cambio] 2017-07-29: Se comenta la siguiente parte, porque en todas las páginas del paginator aparecía
                          "Entradas recientes", lo cual quedaba raro.-->
<!--
<h3 class="archive__subtitle">{{ site.data.ui-text[site.locale].recent_posts | default: "Recent Posts" }}</h3>
-->

{% for post in paginator.posts %}
  {% include archive-single.html %}
{% endfor %}

{% include paginator.html %}

donde únicamente hemos comentado la parte de la plantilla que no nos interesaba que se mostrase. Así, finalmente, el aspecto resulta tal y como se muestra en la siguiente imagen:

Aspecto del índice del blog

En el siguiente artículo de la serie analizaremos cómo configurar la localización del tema Minimal Mistakes al español, por si nos interesase modificar alguno de los valores que para ciertos atributos se han asignado por defecto.

Nota: esta entrada se ha almacenado dentro del proyecto MetaBlog, quedando así disponible para su consulta también a través del siguiente enlace.

Comentar