Multilingual dates in Hugo | A quick solution

post-thumb

Index

If you are running a multi language blog or website with a Hugo template, like this one, you probably want to have also the dates translated.

Multilingual dates in Hugo: the challenge

At the time of writing, April 2021, Hugo does not support multilingual translation for dates about the day of publication for each post. Therefore, we need to do a little trick to have the dates translated.

Multilingual dates in Hugo: the solution

A quick solution is to modify the yaml files in the i18n files and then to modify the snippet of code in the html templates.

These are the steps:

  1. First inside the folder i18n for each language add the month translation for each month.

For example, for Spanish, inside es.yaml add:

- id: January

translation: enero

- id: February

translation: febrero

- id: March

translation: marzo

- id: April

translation: abril

- id: May

translation: mayo

- id: June

translation: junio

- id: July

translation: julio

- id: August

translation: agosto

- id: September

translation: septiembre

- id: October

translation: octubre

- id: November

translation: noviembre

- id: December

translation: diciembre

Remember to add also for the English file en.yaml the following (otherwise the month will be missing in the English version):

- id: January

translation: January

- id: February

translation: February

- id: March

translation: March

- id: April

translation: April

- id: May

translation: May

- id: June

translation: June

- id: July

translation: July

- id: August

translation: August

- id: September

translation: September

- id: October

translation: October

- id: November

translation: November

- id: December

translation: December

  1. Then in the templates where you want to display the date paste the following:

    {{.Date.Day}} {{i18n .Date.Month}} {{.Date.Year}}

that works because .Date.Month gives the specific month which gets translated with the files in the folder i18n.

For example, for this website, I replaced in layouts/_default/single.html the following line:

{{ .PublishDate.Format “2 January 2006” }}

with

{{.Date.Day}} {{i18n .Date.Month}} {{.Date.Year}}

Share on:

DISCLOSURE: Posts may contain affiliate links. If you buy something through one of those links, I might get a small commission, without any extra cost to you.