Language selector using language names translated

support
1

Hi all,

I’m a new user of Hugo and I would like to create a multilingual site using 3 languages: fr, en, nl.
The variable DefaultContentLanguage is set to; en

I would like this language selector to be translated in the current language too upon switching.

So, if the current language is english, the language displayed must be: English, French, Dutch
If the current language is french: Français, Anglais, Néerlandais.
And so on.

In order to translate those, I’ve created 3 files:

  • /i18n/fr.yaml
  • /i18n/nl.yaml
  • /i18n/en.yaml

The content fr.yaml:

English:
  other: Anglais
French:
  other: Français
Dutch:
  other: Néerlandais

The content of nl.yaml and en.yaml is the same but only with the language names translated.

During the development of the language switcher, I noticed a weird behavior with it. I don’t know if it’s a bug yet or a wrong way of doing on my side.

I’m using a theme based on the Bootstrap framework and here is what I’m using for a simple language switcher in the navbar.

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ .Lang }}</a>
    <ul class="dropdown-menu">
        {{ range .Translations }}
        <li class="dropdown menu-item">
            <a href="{{ .Permalink }}">{{ i18n (default .Lang .Site.Language.LanguageName) }}</a>
        </li>
        {{ end}}
    </ul>
</li>

When I select english, I see ‘EN’ in the navbar and there is no links in the language switcher links.
When I select french, I see FR in the navbar and I see ‘Anglais’ and ‘Néerlandais’ in the language switcher.
When I select dutch, I see NL in the navbar and I see ‘Engels’ and ‘Frans’.

The language selector is working fine only for languages that are not the default one.

I’m unable to push the website sources online yet but I can share some codes upon request of course.

Let me know what I can do to help find a solution to this.

Thanks in advance.

2

I think there’s a real issue.

If I add: EnableMissingTranslationPlaceholders: true

I see:

  • [i18n] French
  • [i18n] Dutch

If I run hugo --i18n-warnings:

hugo --i18n-warnings | grep i18n
i18n|MISSING_TRANSLATION|fr|English
i18n|MISSING_TRANSLATION|fr|Dutch
i18n|MISSING_TRANSLATION|nl|English
i18n|MISSING_TRANSLATION|nl|French
i18n|MISSING_TRANSLATION|en|French
i18n|MISSING_TRANSLATION|en|Dutch

Why the translations are not found ?

Do you think I should raise a Github Issue for this ?

3

Which version of hugo do you use?

I think somewhere else in i18n/ configs you have YAML typo, but hugo with version <= 0.19 doesn’t show these errors. So the update to latest 0.20.6 version will help you solve this problem.
Also just a tip: use TOML format for i18n after update (it’s available only in hugo 0.20.*). You will have less problems :wink:

2 Likes
4

Hi,

I’m using the latest release 0.20.6.

And, good news, I’ve found the issue.

Strings passed to i18n must be in lowercase and they must be in lowercase in the .yaml too.

Here’s how I updated my language_switcher partial template:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ .Lang }}</a>
    <ul class="dropdown-menu">
        {{ range .Translations }}
        <li class="dropdown menu-item">
            <a href="{{ .Permalink }}">{{ i18n (lower (default .Lang .Site.Language.LanguageName)) . }}</a>
        </li>
        {{ end}}
    </ul>
</li>
1 Like
5

Can you post or config file please?

6

Sure!

Do you need something else ?

7

Everything is okay in your configs.

It’s very strange issue. I tried to partially reproduce your situation on some site, but everything works normally. The problem is in i18n template function.

8

Have you tried to use a translation id that contains high case letters ?

9

The real issue is probably because you guys are not using the yaml syntax.

I’m coming from the Drupal world and yaml is everywhere… this is why I prefer to use it in Hugo.

Now, to get back to this issue, I tried to replace my yaml i18n files with toml files.

So, from:

english:
  other: English
french:
  other: French
dutch:
  other: Dutch

to

[English]
other = "English"
[French]
other = "French"
[Dutch]
other = "Dutch"

If I use that, it still doesn’t work.
I absolutely need to have translation ids in lowercase, so:

[english]
other = "English"
[french]
other = "French"
[dutch]
other = "Dutch"
10

Have you tried to use a translation id that contains high case letters ?

Yes

The real issue is probably because you guys are not using the yaml syntax.

I tried to use yaml as well as toml.

Sorry, but actually I have no idea, how can it be solved :frowning:

11 
[English]
other = "English"
[French]
other = "French"
[Dutch]
other = "Dutch"

The ids and translations are equal. We have this issue: https://github.com/spf13/hugo/issues/2607