layouts/partials/select-language.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

{{- /*
Selection of available languages.
Dynamically links to corresponding page/post if a translated version exists, otherwise to homepage of that language as fallback.

Note: `$activeLang` and `$allTranslationsForPage` are technically unnecessary variables, their values could be called with `$.Lang` and `$.Translations` respectively.
These variables - together with the explicit naming of `.` context variables in other cases - were chosen for better readability and understandability of the code.
*/ -}}

{{- if gt (len site.Languages) 1 }}
{{- $activeLang := .Lang }}
{{- $allTranslationsForPage := .Translations }}
    <div class="language-select" style="background-color: yellow;">
        <ul>
        {{- range site.Languages }}
            {{- $currLangSlice := . }}
            {{- if ne $currLangSlice.Lang $activeLang }}
                {{- $targetPage := index (where site.Home.Translations "Lang" $currLangSlice.Lang) 0 }}
                {{- $translatedPage := index (where $allTranslationsForPage "Lang" $currLangSlice.Lang) 0 }}
                {{- if $translatedPage }}{{- $targetPage = $translatedPage }}{{- end }}
                <li>
                    <a
                        href="{{ $targetPage.RelPermalink }}"
                        hreflang="{{ $targetPage.Lang }}"
                        aria-label="{{ $targetPage.LinkTitle }} ({{ or $targetPage.Language.LanguageName $targetPage.Lang }})"
                    >
                        <img
                            src="/flags/{{ $targetPage.Lang }}.svg"
                            class="icon icon-flag"
                            style="max-height: 32px"
                            alt="{{ $targetPage.LinkTitle }} ({{ or $targetPage.Language.LanguageName $targetPage.Lang }})"
                            aria-hidden="true"
                        />
                    </a>
                </li>
            {{- end }}
        {{- end }}
        </ul>
    </div>
{{- end }}