Can Hugo mark the current language in the language navigator?

Question

This is the documented way to build a language navigator in Hugo: https://gohugo.io/content-management/multilingual/#list-all-available-languages

<ul>
{{ range $.Site.Home.AllTranslations }}
<li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
{{ end }}
</ul>

Is there a way to mark the currently selected language? I want to make the CSS dependent on the selected language, so it would be very convenient to have a CSS indentifier/class for the currently selected language.

Answer 1

The following works for me in Hugo v0.80.0 (note current-language to style the currently selected language):

{{ range $.Site.Home.AllTranslations }}
  <a href="{{ .Permalink }}" {{ if eq .Lang $.Lang }} class="current-language" {{ end }}>{{ .Language.LanguageName }}</a>
{{ end }}

Answer 2

To answer your specific question:

$.Site.Language

is the variable that returns the language. So if you are in English it will return "en" (whatever language you have in config.toml and that you are currently on).

You can then use that to work however you want.

So {{ $.Site.Language }} for instance.

Example psuedo-code:

{{ if eq . $.Site.Language }}
  <p class="foo-{{.LanguageName}}"></p>
{{ end }}

With CSS maybe like:

.foo-en {
  font-size: 3em;
}

• but, that's fairly more than your question - to get specifically what you requested, the language "flag" so to speak - {{ $.Site.Language }}