DEV Community

loading...
Cover image for Cómo tener un sitio multilingüe en Hugo

Cómo tener un sitio multilingüe en Hugo

charly3pins
By day I’m a Tech Lead. By night I’m open sourcing, learning, reading, listening and blogging. In love with Go and willing to learn new things every day. Posts in English and Spanish.
Originally published at charly3pins.dev on ・4 min read

Como se puede apreciar desde esta semana esta humilde página web se ha remodelado un poco tanto visualmente como internamente, y es que no solo hay nuevos colores, imágenes y secciones, sino que también ¡ofrece todo su contenido en 2 nuevos idiomas! Me he decidido en hacer este paso porqué primero de todo quería probar como funcionaba el tema de los multilingües en Hugo y también para intentar hacer más cómoda la lectura de los artículos a la gente que la visita, sin que el idioma fuera un obstáculo y ofreciendo el mayor confort y placer a los lectores.

Los idiomas como podéis ver en la barra superior son el Castellano y el Catalán. Así que para cambiar el idioma en el que estáis viendo la página, es tan sencillo como escoger en el selector qué idioma prefieres y automáticamente se traducirá todo. Si encontráis alguna errata en la traducción o alguna parte que no está traducida por favor ponedme un comentario en el post en cuestión o comentalo por mis redes sociales (links en la parte baja de la web).

Tras esta "chapa", vamos a ver como se podéis tener vuestros sitios en Hugo en varios idiomas de forma fácil, sencilla y para toda la familia. ¡Vamos allá!

Configurar Idiomas

Lo primero que hay que hacer para tener un sitio multilingüe, es definir en el config.toml los idiomas que se quieren ofrecer. En mi caso he decidido inglés, castellano y catalán de la siguiente forma:

[languages]
[languages.en]
languageName = "English"
weight = 1

[languages.es]
languageName = "Spanish"
weight = 2

[languages.ca]
languageName = "Catalan"
weight = 3
Enter fullscreen mode Exit fullscreen mode

El languageName se utiliza para definir el texto que se verá en la web al comprobar qué idiomas hay disponibles. ¡Spoiler alert! Más adelante veremos cómo traducir también estos textos.

Menús

Para traducir los menús en los diferentes idiomas se deben declarar de la siguiente forma:

[[languages.en.menu.main]]
name = "home"
url = "/"

[[languages.en.menu.main]]
name = "about me"
url = "/about"

[[languages.es.menu.main]]
name = "inicio"
url = "/"

[[languages.es.menu.main]]
name = "sobre mí"
url = "/about"

[[languages.ca.menu.main]]
name = "inici"
url = "/"

[[languages.ca.menu.main]]
name = "sobre mi"
url = "/about"
Enter fullscreen mode Exit fullscreen mode

Contenido

Si por ejemplo queremos traducir la página de Sobre mí, podemos hacerlo simplemente con replicar dicho fichero tantas veces como idiomas tengamos, en este caso 3, añadiendo el ISO del idioma en el nombre de la siguiente forma:

/content/about.en.md
/content/about.es.md
/content/about.ca.md
Enter fullscreen mode Exit fullscreen mode

En nuestro caso el idioma inglés es el por defecto, por lo que incluso podríamos hacerlo tal que así:

/content/about.md
/content/about.es.md
/content/about.ca.md
Enter fullscreen mode Exit fullscreen mode

Contenido traducido

Para encontrar las traducciones de la página en concreto se puede usar el trozo de código proporcionado en la documentación oficial:


{{ if .IsTranslated }}
<h4>{{ i18n "translations" }}</h4>
<ul>
    {{ range .Translations }}
    <li>
        <a href="{{ .Permalink }}">{{ .Lang }}: {{ .Title }}{{ if .IsPage }} ({{ i18n "wordCount" . }}){{ end }}</a>
    </li>
    {{ end }}
</ul>
{{ end }}
Enter fullscreen mode Exit fullscreen mode

En la plantilla donde insertemos este código, una vez se renderice el contenido para ésta, aparecerá si hay traducción o no de ese contenido.

Traducción de textos

En el código anterior ya podemos ver que aparece la función i18n que Hugo utiliza para traducir los textos definidos en los archivos de idiomas dentro del directorio raíz como /i18n. El formato de los archivos de dentro debe ser por ejemplo:

i18n/en.toml
i18n/es.toml
i18n/ca.toml
Enter fullscreen mode Exit fullscreen mode

Para cada idioma anteriormente descrito respectivamente.

El contenido del archivo será parecido a:

[readMore]
other = "Read more"
Enter fullscreen mode Exit fullscreen mode

Para el archivo en inglés.

[readMore]
other = "Leer más"
Enter fullscreen mode Exit fullscreen mode

Para el archivo en castellano.

[readMore]
other = "Llegir més"
Enter fullscreen mode Exit fullscreen mode

Para el archivo en catalán.

Una vez definida la traducción para Leer más, se utiliza en nuestra plantilla de Hugo como:

{{ i18n "readMore" }}
Enter fullscreen mode Exit fullscreen mode

Y el resultado será el texto definido en los .toml según el idioma escogido por el usuario para ver la página web.

Traducción singular y/o plural

Se pueden definir traducciones singulares o plurales dependiendo un "contador", ya que la función i18n ofrece esa posibilidad. Por ejemplo para el Tiempo de leído de un artículo, podemos definirlo tal que así en el .toml:

[readingTime]
one = "One minute to read"
other = "{{.Count}} minutes to read"
Enter fullscreen mode Exit fullscreen mode

Vemos que le pasamos el .Count a la traducción por lo que tendremos que invocar la función de la siguiente forma:

{{ i18n "readingTime" .ReadingTime }}
Enter fullscreen mode Exit fullscreen mode

Nota: la propiedad .ReadingTime es un contador que retorna Hugo según el número de palabras de los artículos que creemos.

Referencias

Para más detalles consultar la página oficial de la documentación de Hugo.

No dude en comentar aquí o contactarme en mis redes sociales para cualquier comentario, pregunta o sugerencia.

Discussion (0)