Shortcodes de GoHugo que me parecen útiles

En este post te quiero compartir algunos shortcodes de GoHugo que he usado y que me han ahorrado tiempo o mejorado la manera en la que escribo en mi blog.

Algunos shortcodes son míos, otros los he tomado de internet.

Enlace a otro post

Este es uno básico y que ya viene incluido por defecto. Se trata de un shortcode que te permite armar un enlace permanente a otro post, pero que además valida que ese contenido exista.

De este modo será imposible equivocarte al referenciar un post dentro de otro, ya que el “compilador” de Hugo va a revisar que exista, y también va a generar un enlace permanente de acuerdo a la ruta base de tu sitio, de modo que si después haces una migración todos los enlaces serán cambiados automáticamente.

Se usa así:

{{<ref "posts/nombre-contenido">}}

Toma en cuenta que en mi caso tengo mi contenido en la carpeta posts y por eso lo referencio así.

También se puede usar en modo multilenguaje, por ejemplo en inglés para referenciar uno en español:

{{< ref path="posts/codigo-fuente-software-pos-restaurante" lang="es" >}}

Y la salida es algo como:

http://localhost:1313/blog/posts/migrando-wordpress-hugo-ubuntu-rocky

Es importante aclarar que este shortcode solo genera el enlace, es tu responsabilidad encerrarlo en [ si quieres meterlo dentro de una frase

Enlace a etiqueta y categoría

En GoHugo no existen ni los posts, pages, tags o categories, pero sí existe el contenido y las taxonomías. Para referenciar una etiqueta o categoría lo hago con el siguiente shortcode:

{{- $termName := .Get 0 -}}

{{- $page := "" -}}

{{/* Primero intenta buscar en 'tags' */}}
{{- with site.GetPage (printf "tags/%s" $termName) -}}
    {{- $page = . -}}
{{- end -}}

{{/* Si no lo encontró en 'tags', intenta buscar en 'categories' */}}
{{- if not $page -}}
    {{- with site.GetPage (printf "categories/%s" $termName) -}}
        {{- $page = . -}}
    {{- end -}}
{{- end -}}

{{- if $page -}}
    {{- $page.RelPermalink -}}
{{- else -}}
    {{ errorf "No se encontró el término '%s' ni en 'tags' ni en 'categories' en el archivo: %s" $termName .Page.Path }}
{{- end -}}

Lo he colocado en layouts/_shortcodes/tagref.html y se usa así:

{{< tagref "cpp" >}}

También va a generar un enlace como ref

Video de YouTube

Este shortcode ya viene incluido por defecto y permite incrustar un video de YouTube a partir de su id.

Se usa así:

{{<youtube "aquí va el id">}}

El id es lo que va después del ?v por ejemplo si el video es https://www.youtube.com/watch?v=IgsFXhW8eeY hay que usar {{<youtube "IgsFXhW8eeY">}}

Imagen optimizada

Este shortcode lo he creado yo mismo y ya he hablado de él en su propio post. Con esto vas a poder incrustar una imagen optimizada para SEO con varios tamaños de pantalla reduciendo el tamaño de la imagen pero manteniendo su calidad máxima posible además de aplicar lazy loading

Mira cómo hacerlo en el post sobre imágenes lazy loading con GoHugo

Código fuente de archivo local

A veces al incluir código fuente en markdown hay problemas si ese código contiene sintaxis de shortcode de GoHugo. Encontré este problema cuando quise publicar mi script de Python para arreglar enlaces ya que ahí generaba contenido que a su vez contenía un shortcode de Hugo.

La solución fue incrustar ese archivo leyéndolo desde el sistema de archivos. Mi shortcode está en layouts/_shortcodes/codigo_local.html y se ve así:

{{- $path := .Get 0 -}}
{{- $lang := .Get 1 | default "text" -}}
{{- $file := .Page.Resources.GetMatch $path -}}
{{- if not $file }}
  Archivo no encontrado: {{ $path }}
{{- else }}
{{ highlight $file.Content $lang "" }}
{{- end -}}

Esto te da la opción de incluir código fuente leído de un archivo independiente. Se usa así:

{{<codigo_local "migrar.py" "python">}}

Y esos son todos los shortcodes que uso actualmente en mi día a día mientras escribo este blog. Espero que te sean útiles.