Traducir Fechas en Hugo (Truquito)

Publicado

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>

Agregando m谩s idiomas

Pasos necesarios para ir agregando m谩s idiomas a la soluci贸n.

  • Crear m谩s archivos data
  • agregar condiciones a partial function