domingo, 22 de septiembre de 2019

Traducir Fechas en Hugo (Truquito)

#Blog #Hugo #Golang

La traducción (o internacionalización, i18n) de fechas dentro de Hugo no es algo que tenga un soporte muy completo. Por esto es que tuve que hacer algunos malabares 🤹 para que funcione en este blog. Comparto el truquito.

La idea con esto es combinar información obtenida desde distintas partes, pero mostrarla toda junta, en formato texto, con los dias y meses escritos en palabras. En inglés esto puede ser Friday, March 3, 2017. Este formato es soportado de forma nativa por Hugo. Pero ahora ¿Y si lo quiero en español? ¿Cómo consigo el formato Viernes 3 de Marzo de 2017?

Bueno, vamos a buscarle la vuelta…

1. La propiedad .Format de las fechas

Según se puede ver en la documentacion oficial, las variables .PublishDate, .Date y .Lastmod de las páginas en Hugo permiten acceder a una propiedad/función .Format.

A esta función .Format se le pasa un string con el formato que queremos que se le aplique a esa fecha.

Usando esta función podemos conseguir una fecha formateada, pero sólo para inglés. Para conseguir la fecha del ejemplo (Friday, March 3, 2017), podemos hacer:

Fecha: {{ .Date.Format "Monday, January 2, 2006" }}

¿Y que quiere decir esto de “Monday, January 2, 2006”? ¿De dónde salió?

Bueno, Hugo maneja el formateo de fechas usando una “fecha de referencia”, en donde los valores 1,2,3… se corresponden con las posiciones de los datos de esta fecha de referencia. Esto se puede ver en la documentación de Hugo, que hace referencia directamente a la documentación de Go.

No es importante entender en detalle todo eso, pero si es importante saber que a esta función .Format le podemos pedir datos de forma específica, usando este string de formato.

Toooodo esto anterior nos sirve para fechas en inglés, y ahora, ¿Para los demás idiomas qué hacemos?

2. Traducciones dentro de /data/

En la documentación de contenido multilenguaje de Hugo nos ofrecen una posible solución al tema de traducir los nombres de los meses.

La idea es contar con un archivo “data” con un array con los nombres de los meses, y acceder a cada uno a través de su índice, de su número de orden.

Entonces, si tenemos un listado en /data/meses.yml con el formato

1: "Enero"
2: "Febrero"
3: "Marzo"
4: "Abril"
5: "Mayo"
6: "Junio"
7: "Julio"
8: "Agosto"
9: "Septiembre"
10: "Octubre"
11: "Noviembre"
12: "Diciembre"

Podemos usar las funciones Data Templates de Hugo para acceder a estos valores.

Particularmente en este ejemplo, para obtener "Febrero" desde /data/meses.yml, podemos hacer en algún template:

{{ site.Data.meses 2 }}

Con esto, sumado a funciones para el formateo de fechas, podemos obtener la traducción del nombre del mes.

{{ site.Data.meses (printf "%d" .Date.Month) }}

Y usando ese mismo truco, podemos también obtener el nombre del día de la semana. Existiendo un /data/dias.yml, podemos hacer

0: "Domingo"
1: "Lunes"
2: "Martes"
3: "Miércoles"
4: "Jueves"
5: "Viernes"
6: "Sábado"

{{ site.Data.dias (printf "%d" .Date.Weekday) }}

3. Partials como funciones

Otra posibilidad que nos ofrece Hugo es la de definir partials que retornen un valor. Esto nos va a resultar útil para reutilizar nuestros templates como si fuesen funciones.

4. Juntando Todo

Ahora deberíamos agrupar toda esta lógica que estamos creando alrededor de la traducción de fechas, para poder usarla de una forma más simple en nuestros templates.

{{ $formattedDate := .Format "Friday, March 3, 2006" }}

{{ $monthNumber := .Month }}
{{ $dayNumber := .Weekday }}

{{ if eq site.Language.Lang "es" }}
  {{ $monthNumber = index site.Data.meses (printf "%d" .Month) }}
  {{ $dayNumber = index site.Data.dias (printf "%d" .Weekday) }}
  {{ $formattedDate = delimit (slice $dayNumber (printf "%d" .Day) "de" $monthNumber "de" (printf "%d" .Year)) " "}}
{{ end }}

{{ return $formattedDate }}

Ese es tal cual el código que se está usando en este sitio. Este código está dentro de un partial formatted-date.html, y se llama desde otro lado:

<time datetime="{{ .Date.Format "2006-01-02T15:04Z07:00" }}" title="{{ .Date.Format "2006-01-02T15:04Z07:00" }}">
  {{ partial "formatted-date.html" .Date }}
</time>

Extra: Agregando más idiomas

Pasos necesarios para ir agregando más idiomas a la solución:

1. Crear más archivos en carpeta /data.
2. Agregar condición a partial function en formatted-date.html.