[SOLVED] Language switcher: link to current translated content instead of home

support
1

Hi everyone, just start playing around with Hugo and so far I love it! I try to create a multi language site with two languages (English and Thai). Currently I am stuck at the language switcher code. I copied the example code from the docs:

 <ul>
    {{ range $.Site.Home.AllTranslations }}
      <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
    {{ end }}
  </ul>

Currently the language automatically links back to the home of each language instead of of the translated content.

Here is an example:
Assuming the user is viewing an article in English with the following url:
http://localhost:1313/2018/05/841-whats-new-20-recently-opened-bars-clubs/

The url in the language switcher for Thai language points back to the home page http://localhost:1313/th/ instead of the article in Thai
http://localhost:1313/th/2018/05/841-whats-new-20-recently-opened-bars-clubs/

Is there a way to configure the language switcher to link to current active page which is translated?

Here is my config:

defaultContentLanguage: "en"

permalinks:
  articles: /:year/:month/:slug/

# ENGLISH LANGUAGE SETTINGS
languages:
  en:
    LanguageName: "English"
    title: "Siam2nite English"
    weight: 1

    menu:
      main:
      - identifier: nightlife
        name: Nightlife
        title: Nightlife
        url: /categories/nightlife/
        weight: 1
      - identifier: lifestyle
        name: Lifestyle
        title: Lifestyle
        url: /categories/lifestyle/
        weight: 2
      - identifier: fashion
        name: Fashion
        title: Fashion
        url: /categories/fashion/
        weight: 3
      - identifier: food
        name: Food
        title: Food
        url: /categories/food/
        weight: 4
      - identifier: music
        name: Music
        title: Music
        url: /categories/music/
        weight: 5

# THAI LANGUAGE SETTINGS
  th:
    LanguageName: "ไทย"
    title: "Siam2nite Thai"
    weight: 2

    menu:
      main:
      - identifier: nightlife
        name: ไนท์ไลฟ์
        title: ไนท์ไลฟ์
        url: /categories/nightlife/
        weight: 1
      - identifier: lifestyle
        name: ไลฟ์สไตล์
        title: ไลฟ์สไตล์
        url: /categories/lifestyle/
        weight: 2
      - identifier: fashion
        name: แฟชั่น
        title: แฟชั่น
        url: /categories/fashion/
        weight: 3
      - identifier: food
        name: อาหาร
        title: อาหาร
        url: /categories/food/
        weight: 4
      - identifier: music
        name: ดนตรี
        title: ดนตรี
        url: /categories/music/
        weight: 5

Any help is really appreciated :slight_smile:

2

That example appears to be meant for the home page. Is that where you are using it?

3

If you want this to work on every page, what I use is:

{{ range .AllTranslations }}
{{ end }}

This loads the translations of the current page. With $.Site.Home you’re loading the translations for just the home page.

4

Hi Rick & Iswest

The solution @lswest provided is exactly what I was looking for, awesome :slight_smile:

Thank you both for your help.

Have a great weekend!

1 Like
5

You may want to look at this solution too: Language switcher in menu