I’m trying to set up a language switcher that fulfils these requirements:
the order of the languages should be permanent
if there isn’t a translation for that piece of content in the alternate language the button should be disabled or show the result of the Lang.Merge
So far, I came up with this:
{{ if .IsHome }}
<li><a href="/pt" class="{{- if eq (string .Lang) "pt" -}}active{{- end -}}">Portuguese</a></li>
<li><a href="/en" class="{{- if eq (string .Lang) "en" -}}active{{- end -}}">English</a></li>
{{ else }}
<li><a href="/pt{{ .Permalink | relURL }}" class="{{- if eq (string .Lang) "pt" -}}active{{- end -}}">Portuguese</a></li>
<li><a href="/en{{ .Permalink | relURL }}" class="{{- if eq (string .Lang) "en" -}}active{{- end -}}">English</a></li>
{{ end }}
But of course, this breaks when there isn’t a translation and is too hard coded. I also tried to range through the translations, but that had two problems:
the order of languages would change
if there wasn’t an available translation, it would only show one button.
I’m a bit lost as to how to cycle through all the available languages and set the href appropriately.
Not sure if it answers your question but, this is what I am doing in my work-in-progress site.
This assumes two languages. It ranges through the translations of the page it’s on, and shows the other one. If there is no translation, it gives a link to the root depending on which language the site is in. In this case, the site is two domains, but in the case a language is in a subfolder, just hard-code the href accordingly.
Side note: I’m using the “bulma” css lib this time around, and while I mostly like it, the way it uses color, is to assign a color to a class with some meaning, like is-primary, is-info, is-danger etc. The color I selected happens to be called is-danger but, it’s semantically meaningless, so it can be ignored. (I need to make some color classes that simply are what they are).
Just wanted to say thank you for these answers. I wanted a flag based switcher, so I ended up with something like this code below. I’m not sure if using emoji like that is recommended, or if I should use an SVG or other image(?):
{{ if .IsTranslated }}
{{ range .Translations }}
{{ if eq .Site.Language.Lang "en" }}
<li><a title="English" href="{{ .RelPermalink }}">🇬🇧</a></li>
{{ else }}
<li><a title="Norsk" href="{{ .RelPermalink }}">🇳🇴</a></li>
{{ end }}
{{ end }}
{{ else }}
{{ if eq .Site.Language.Lang "no" }}
<li><a title="English" href="/en">🇬🇧</a></li>
{{ else }}
<li><a title="Norsk" href="/">🇳🇴</a></li>
{{ end }}
{{ end }}
</ul>
(Also not sure if re-opening old threads like this is considered good or bad … )
generally, new support questions should get their own thread. But yours is more adding to the possibilities. There has been some discussion about using flags for this elsewhere in the forum; it could be considered problematic since flags are nation-based whereas languages are not.
@flips i saw your code, but you had to hard code language cases.
In the spirit (or did I stole it here, can’t remember :-)) of @martignoni example this is what I have for my multilingual site. The partial is universal. I just have to add some entries to config.toml
{{ $siteLanguages := site.Languages}}
{{ $pageLang := .Page.Lang}}
{{- range .Page.AllTranslations }}
{{ $translation := . }}
{{- range sort $siteLanguages "Weight" "asc" }}
{{- if eq $translation.Lang .Lang }}
{{ if eq $pageLang .Lang}}
<a class="flagselect" href="{{ $translation.Permalink | relURL }}">{{ .Params.languageNameShort }}{{ .Params.languageFlag }}</a>
{{ else }}
<a class="flagnoselect" href="{{ $translation.Permalink | relURL }}">{{ .Params.languageNameShort }}{{ .Params.languageFlag }}</a>
{{ end }}
{{- end }}
{{- end }}
{{- end }}
and on config.toml I have a language subsection for each language
Here is my take on a language switcher. I put some work in to getting proper markup and attributes, setting rel as alternative and setting hreflang etc.
<h2 class="visually-hidden">{{ i18n "lang_select_title" }}</h2>
<nav class="language-selector layout__language-selector">
<ul class="navbar">
{{ if .IsTranslated -}}
{{ range .Translations }}
<li><a rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .Language.LanguageName }}</a></li>
{{ end -}}
{{ else -}}
{{ range .Site.Languages -}}
{{ if ne $.Site.Language.Lang .Lang }}
<li><a rel="alternate" href="{{ .Lang | relURL }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .LanguageName }}</a></li>
{{ end -}}
{{ end -}}
{{ end -}}
</ul>
</nav>
This switcher will switch to a translated version of the page if it exist and the front page if it doesn’t.
)