Language switcher in menu

support
8

@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

[languages]
    [languages.fr]
        languageName = "Français"
        languageNameShort = "fr"
        languageFlag = "🇫🇷"
        weight = 1
    [languages.en]
        languageName = "English"
        languageNameShort = "en"
        languageFlag = "🇬🇧"
        weight = 3

/* Flags navigation */
.flagselect {
  border: 1px solid #333333;
  padding: 0px;
  margin: 0px;
  font-weight: bold;
  color: black;
  font-size: 90%;
}
.flagnoselect {
  padding: 0px;
  margin: 0px;
  color: #333333;
  font-size: 90%;
}
3 Likes