Cómo agregar metadatos personalizados a los artículos de nuestro blog en GatsbyJS

Ya sabemos cómo crear nuestro blog, portfolio o la página estática que queramos utilizando GatsbyJS, y disfrutando así de toda la funcionalidad UI que nos brinda React.

El siguiente paso es añadir algo de funcionalidad. Aunque no es una funcionalidad dinámica, tener metadatos con los que poder categorizar nuestro contenido es un requisito clave.

Añadiendo el categorías a nuestro contenido MarkDown

Vamos a probar añadiendo una categoría a los artículos de nuestro blog. Para ello nos dirigimos a cualquiera de los archivos .md de nuestros artículos y añadimos en la cabecera de metadatos la nueva entrada, category: Nombre de la categoría.

Debemos repetir esto con todos los artículos a los que le queramos asignar una categoría.

---
template: Post
path: /curso-de-nodejs
date: 2021-07-05T20:37:50.738Z
title: Aprender NodeJS
thumbnail: /assets/nodejs.jpg
category: NodeJS
---

Aquí puede verse un ejemplo

Recuperando la categoría desde la query Graphql

Luego, para poder hacer uso de este nuevo metadato, debemos incluirlo en las queries Graphql que estemos invocando para recuperar contenido.

allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
      edges {
        node {
          id
          excerpt(pruneLength: 250)
          frontmatter {
            date(formatString: "DD/MM/YYYY")
            path
            title
            category
            thumbnail
          }
        }
      }
    }

Añadimos categoy, entre title y thumbnail por conveniencia (el orden no influye)

Utilizando la categoría en nuestro componente

Finalmente, lo utilizamos desde el componente.

<div className="post-category">Categoría: {post.frontmatter.category}</div>

Utilizarlo es tan sencillo como acceder a la propiedad post del componente

Sí queremos asegurarnos de que el renderizado no fallará en caso de que este atributo de los metadatos no se encuentre disponible para un contenido concreto, debemos asegurarnos de gestionar ese caso:

{!!post.frontmatter.category && (
    <div className="post-category">Categoría: {post.frontmatter.category}</div>
)}

Solucionado

Esperamos que te haya gustado esta guía rápida. ¿Por qué no pruebas a añadir tus propios atributos a los metadatos de tus artículos? Etiquetas, tipos... Existen muchas más posibilidades.