Change language with Dropdown menu

support
1

There are four types of path.

Type Url
Site en → https://mysite.com
de → https://mysite.com/de/
Section en → https://mysite.com/section/
de → https://mysite.com/de/section/
Tags en → https://mysite.com/tags/**
de → https://mysite.com/de/tags/*
Post en → https://mysite.com/section/2024-05-23-english-slug/
ar → https://mysite.com/ar/section/2024-05-23-تيسلا-تعتنق-دوجكوين-لعمليات-الشراء/

I think somebody solved this problem :wink:
How to change language from one type of language path and slug to another from current endpoint.

English front-matter
+++
title = "Tesla Embraces Dogecoin for Purchases"
date = 2024-05-06T15:27:03+03:00
draft = false
slug = "tesla-accepts-dogecoin-payments"
+++

Arabic front-matter
+++
title = "تيسلا تعتنق دوجكوين لعمليات الشراء"
date = 2024-05-06T15:27:03+03:00
draft = false
slug = "تيسلا-تعتنق-دوجكوين-لعمليات-الشراء"
+++

I using this code for dropdown menu
<div class="space-y-2">
        <li class="hover:bg-slate-300 p-2">
          <a href="/">{{ ":us:" | .RenderString }} English</a>
        </li>
        <li class="hover:bg-slate-300 p-2">
          <a href="/de">{{ ":de:" | .RenderString }} Deutsch</a>
        </li class="hover:bg-slate-300 p-2">
        <li class="hover:bg-slate-300 p-2"><a href="/es">{{ ":es:" | .RenderString }} Español</a></li>
        <li class="hover:bg-slate-300 p-2"><a href="/fr">{{ ":fr:" | .RenderString }} Français</a></li>
        <li class="hover:bg-slate-300 p-2"><a href="/id">{{ ":indonesia:" | .RenderString }} Indonesia</a></li>
        <li class="hover:bg-slate-300 p-2"><a href="/it">{{ ":it:" | .RenderString }} Italiano</a></li>
        <li class="hover:bg-slate-300 p-2"><a href="/pt">{{ ":portugal:" | .RenderString }} Português</a></li>
      </div>

I use this code in my site head section for meta and it works fine with all endpoints.

{{/* Get all URL variations for the page. */}}
{{ range .Translations }}
<link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}" />
{{ end }}
<link rel="alternate" hreflang="{{ site.LanguageCode | default "en-us" }}" href="{{ .Permalink }}" />
<link rel="canonical" href="{{ .Permalink }}" />

meta_path

2

I don’t understand the question.

3

lang_menu
lang_menu2692×957 163 KB

This block of code solves the problems described above. But why doesn’t it display the first English language? And is it possible to optimize this code?

<div class="space-y-2">
        {{ range .Translations }}
          {{ if eq .Lang "en" }}
              {{/* <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}" /> */}}
              <li class="hover:bg-slate-300 p-2">
                <a href="{{ .Permalink }}">{{ ":us:" | .RenderString }} English</a>
              </li>
          {{ else if eq .Lang "ru" }}
            <li class="hover:bg-slate-300 p-2">
            <a href="{{ .Permalink }}">{{ ":ru:" | .RenderString }} Русский</a></li>
          {{ else if eq .Lang "de" }}
              <li class="hover:bg-slate-300 p-2">
                <a href="{{ .Permalink }}">{{ ":de:" | .RenderString }} Deutsch</a>
              </li>
          {{ else if eq .Lang "es" }}
              <li class="hover:bg-slate-300 p-2">
              <a href="{{ .Permalink }}">{{ ":es:" | .RenderString }} Español</a>
              </li>
          {{ else if eq .Lang "fr" }}
              <li class="hover:bg-slate-300 p-2">
              <a href="{{ .Permalink }}">{{ ":fr:" | .RenderString }} Français</a>
              </li>
          {{ else if eq .Lang "id" }}
              <li class="hover:bg-slate-300 p-2">
              <a href="{{ .Permalink }}">{{ ":indonesia:" | .RenderString }} Indonesia</a>
              </li>
          
          {{ else if eq .Lang "pt" }}
          <li class="hover:bg-slate-300 p-2">
          <a href="{{ .Permalink }}">{{ ":portugal:" | .RenderString }} Português</a></li>
          {{ end }}
        {{ end }}        
      </div>
      <div class="space-y-2">
        {{ range .Translations }}          
          {{ if eq .Lang "tr" }}
          <li class="hover:bg-slate-300 p-2">
          <a href="{{ .Permalink }}">{{ ":tr:" | .RenderString }} Türkçe</a>
          </li>
          {{ else if eq .Lang "it" }}
          <li class="hover:bg-slate-300 p-2">
          <a href="{{ .Permalink }}">{{ ":it:" | .RenderString }} Italiano</a></li>
          {{ else if eq .Lang "ar" }}
          <li class="hover:bg-slate-300 p-2">
          <a href="{{ .Permalink }}"
            >{{ ":united_arab_emirates:" | .RenderString }} العربية</a
          >
          </li>
          {{ else if eq .Lang "zh-hans" }}
          <li class="hover:bg-slate-300 p-2">
          <a href="{{ .Permalink }}">{{ ":cn:" | .RenderString }} 简体中文</a>
          </li>
          {{ else if eq .Lang "zh-hant" }}
          <li class="hover:bg-slate-300 p-2">
          <a href="{{ .Permalink }}">{{ ":cn:" | .RenderString }} 繁體中文</a></li>
          {{ else if eq .Lang "ja" }}
          <li class="hover:bg-slate-300 p-2">
          <a href="{{ .Permalink }}">{{ ":jp:" | .RenderString }} 日本語</a></li>
          {{ else if eq .Lang "ko" }}
          <li class="hover:bg-slate-300 p-2">
          <a href="{{ .Permalink }}">{{ ":kr:" | .RenderString }} 한국어</a></li>
          {{ end }}
        {{ end }}
      </div>

hugo.toml

hasCJKLanguage = true
defaultContentLanguage = 'en'

laguages.toml

[en]
    disabled = false
    languageCode = 'en'
    languageDirection = 'ltr'
    languageName = 'English'    
    weight = 10

[ru]
    disabled = false
    languageCode = 'ru'
    languageDirection = 'ltr'
    languageName = 'Русский'    
    weight = 20

[es]
    disabled = false
    languageCode = 'es'
    languageDirection = 'ltr'
    languageName = 'Español'    
    weight = 30

[fr]
    disabled = false
    languageCode = 'fr'
    languageDirection = 'ltr'
    languageName = 'Français'    
    weight = 40

[de]
    disabled = false
    languageCode = 'de'
    languageDirection = 'ltr'
    languageName = 'Deutsch'    
    weight = 50

[pt]
    disabled = false
    languageCode = 'pt'
    languageDirection = 'ltr'
    languageName = 'Português'    
    weight = 60

[id]
    disabled = false
    languageCode = 'id'
    languageDirection = 'ltr'
    languageName = 'Bahasa Indonesia'    
    weight = 70

[tr]
    disabled = false
    languageCode = 'tr'
    languageDirection = 'ltr'
    languageName = 'Türkçe'    
    weight = 80

[it]
    disabled = false
    languageCode = 'it'
    languageDirection = 'ltr'
    languageName = 'Italiano'    
    weight = 90

[ar]
    disabled = false
    languageCode = 'ar'
    languageDirection = 'rtl'
    languageName = 'العربية'    
    weight = 100

[zh-Hans]
    disabled = false
    languageCode = 'zh-Hans'
    languageDirection = 'ltr'
    languageName = '简体中文'    
    weight = 110

[zh-Hant]
    disabled = false
    languageCode = 'zh-Hant'
    languageDirection = 'ltr'
    languageName = '繁體中文'    
    weight = 120

[ja]
    disabled = false
    languageCode = 'ja'
    languageDirection = 'ltr'
    languageName = '日本語'    
    weight = 130
  
[ko]
    disabled = false
    languageCode = 'ko'
    languageDirection = 'ltr'
    languageName = '한국어'    
    weight = 130
4

If you want to include all translations, use the .AllTranslations method. And yes, you can definitely optimize your language switcher code. Here’s an example:

git clone --single-branch -b hugo-forum-topic-50079 https://github.com/jmooring/hugo-testing hugo-forum-topic-50079
cd hugo-forum-topic-50079
hugo server

Files of interest:

  • layouts/partials/language-switcher.html
  • hugo.toml (see per language params to set flag)
1 Like
5

This is absolutely brilliant. You’re incredibly clever and a fantastic teacher. Thank you so much.

1 Like
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.