A Language Switch Link for Hugo Websites

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.

{{ if eq .Site.Language.Lang "de" }}
    {{ $found := false }}
    {{ range .Translations }}
        {{ if eq .Lang "en" }} 
            <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a> 
            {{ $found = true }} 
            {{ break }} 
        {{ end }} 
    {{ end }}
    {{ if not $found }} 
        <a href="{{ .Site.BaseURL }}en/">Englisch</a> 
    {{ end }}
{{ else if eq .Site.Language.Lang "en" }}
    {{ $found := false }}
    {{ range .Translations }}
        {{ if eq .Lang "de" }} 
            <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
            {{ $found = true }} 
            {{ break }} 
        {{ end }} 
    {{ end }}
    {{ if not $found }} 
        <a href="{{ .Site.BaseURL }}de/">Deutsch</a> 
    {{ end }}
{{ end }}
👋 Hello, I am Denis,

I am a freelance software architect, full-stack developer, and co-founder of DenktMit, a network of independent IT experts.

Got questions or a project in mind? Get in touch via LinkedIn or email.

back to blog list