Multi-language

Hextra supports creating site with multiple languages using Hugo’s multilingual mode.

Enable Multi-language

To make our site multi-language, we need to tell Hugo the supported languages. We need to add to the site configuration file:

hugo.yaml

defaultContentLanguage: en
languages:
  en:
    languageName: English
    weight: 1
  fr:
    languageName: Français
    weight: 2
  ja:
    languageName: 日本語
    weight: 3

Manage Translations by Filename

Hugo supports managing translations by filename. For example, if we have a file content/docs/_index.md in English, we can create a file content/docs/_index.fr.md for French translation.

- _index.md
- _index.fr.md
- _index.ja.md

Note: Hugo also supports Translation by content directory.

Translate Menu Items

To translate menu items in the navigation bar, we need to set the identifier field:

hugo.yaml

menu:
  main:
    - identifier: documentation
      name: Documentation
      pageRef: /docs
      weight: 1
    - identifier: blog
      name: Blog
      pageRef: /blog
      weight: 2

and translate them in the corresponding i18n file:

i18n/fr.yaml

documentation: Documentation
blog: Blog

Translate Strings

To translate strings on the other places, we need to add the translation to the corresponding i18n file: