Añadiendo la fecha de publicación en el índice de entradas del blog

2 minuto(s) de lectura

Si accedemos al índice de entradas del blog observaremos un detalle que, al menos en mi caso, resulta ciertamente curioso. Tal y como se muestra en la siguiente imagen:

Índice del blog sin fecha de publicación

podemos consultar el título de las entradas más recientes del blog, así como una estimación del tiempo que nos llevaría la lectura de cada una de ellas. No obstante, no figura una característica que sí está presente habitualmente en este tipo de índices: ¡la fecha de publicación!

¿Qué tal si antecedemos la mencionada estimación del tiempo de lectura con la fecha en la que se publicó el artículo? En mi opinión, es un detalle que puede resultar de utilidad al lector, puesto que es más fácil hacerse una idea de la periodicidad con la que se publican entradas o descubrir rápidamente si el sitio lleva un tiempo abandonado.

Así pues, con tal objetivo en mente, tenemos que editar la plantilla que genera este tipo de índices y que reside en el fichero archive-single.html, ubicado en el subdirectorio _includes. Debemos desplazarnos casi al final del mismo, hasta localizar el siguiente bloque de código:

{% if post.read_time %}
  <p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>
{% endif %}

Como declaramos en el archivo _config.yml que se mostrase, por defecto, el tiempo de lectura para los artículos del blog, podemos aprovechar esa parte ubicar la información que nos interesa, de forma que anteceda adecuadamente la estimación para el mencionado tiempo de lectura.

De esta manera, sustituiremos el anterior bloque de código por el siguiente:

{% if post.read_time %}
  <p class="page__meta"><i class="fa fa-fw fa-calendar" aria-hidden="true"></i> <time datetime="{{ post.date | date: "%Y-%m-%d" }}">{{ post.date | date: "%Y-%m-%d" }}</time> | <i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>
{% endif %}

donde:

<i class="fa fa-fw fa-calendar" aria-hidden="true"></i>

es el código correspondiente a un icono que muestra un calendario. Dado que la estimación para el tiempo de lectura viene precedida por un icono que representa un reloj, me pareció adecuado utilizar un calendario para anteceder la fecha de publicación. Por otro lado,

<time datetime="{{ post.date | date: "%Y-%m-%d" }}">{{ post.date | date: "%Y-%m-%d" }}</time>

es la instrucción necesaria para mostrar propiamente la fecha de publicación. Sigue el mismo formato que indicamos en un post anterior de esta serie de artículos, para dar coherencia a cómo se ofrece esta información a lo largo y ancho de todo el sitio web.

Finalmente, separaremos la fecha de publicación de la entrada y la estimación de su tiempo de lectura utilizando simplemente una barra vertical, |. El resultado figura en la siguiente imagen:

Índice del blog con fecha de publicación

En el próximo artículo de la serie retomaremos un par de aquellas tareas pendientes que todavía tenemos: generar una página en el sitio web asociada a las categorías que estamos declarando para nuestros artículos del blog, así como una similar para sus correspondientes etiquetas. La idea será facilitar al lector un par de índices similares al que actualmente se puede consultar al acceder al blog pero desglosados bien por categorías, bien por etiquetas, según haga clic en unas o en otras.

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