Ein Sprachwechsel-Link für Hugo Webseiten

This website was created using Hugo, a static site generator framework. While I’m certainly not going to win any awards for design, I have placed a lot of emphasis on usability and responsive design.

Hugo supports multilingualism at a very high level. What’s missing out of the box can be implemented with Hugo Methods.

I was missing a button or link through which the currently displayed page is linked to its counterpart in another language.

So, I specifically wanted a link that does not lead to the homepage in a certain language, but rather switches between this blog article in German and English, for example. Only in the case that it does not exist in English, I would like to direct the reader to the homepage instead.

<!-- Überprüfen, ob die aktuelle Sprache Deutsch ist -->
{{ if eq .Site.Language.Lang "de" }}
    
    <!-- Initialisieren einer Flagge, um zu verfolgen, ob eine englische Übersetzung gefunden wurde -->
    {{ $found := false }}
    
    <!-- Beginn der Schleife durch die verfügbaren Übersetzungen -->
    {{ range .Translations }}
        <!-- Überprüfen, ob die aktuelle Übersetzung auf Englisch ist -->
        {{ if eq .Lang "en" }} 
            <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a> 
            {{ $found = true }} 
            {{ break }} 
        {{ end }} 
    {{ end }}

    <!-- Überprüfen, ob keine englische Übersetzung gefunden wurde und Standardlink erstellen -->
    {{ if not $found }} 
        <a href="{{ .Site.BaseURL }}en/">Englisch</a> 
    {{ end }}

<!-- Überprüfen, ob die aktuelle Sprache Englisch ist -->
{{ else if eq .Site.Language.Lang "en" }}

    <!-- Initialisieren einer Flagge, um zu verfolgen, ob eine deutsche Übersetzung gefunden wurde -->
    {{ $found := false }}

    <!-- Beginn der Schleife durch die verfügbaren Übersetzungen -->
    {{ range .Translations }}
        <!-- Überprüfen, ob die aktuelle Übersetzung auf Deutsch ist -->
        {{ if eq .Lang "de" }} 
            <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
            {{ $found = true }} 
            {{ break }} 
        {{ end }} 
    {{ end }}

    <!-- Überprüfen, ob keine deutsche Übersetzung gefunden wurde und Standardlink erstellen -->
    {{ if not $found }} 
        <a href="{{ .Site.BaseURL }}de/">Deutsch</a> 
    {{ end }}
{{ end }}
👋 Hallo, ich bin Denis

Ich bin freiberuflicher Software Architekt, Full Stack Developer und Mitgründer von DenktMit, einem Experten-Netzwerk selbstständiger IT-Spezialisten.

Hast du Fragen oder eine Projektidee? Dann kontaktiere mich auf LinkedIn oder per E-Mail.

Zurück zur Blog Übersicht