Redirect to Translated Version of Current Page with Multilingual Selector


New user of Hugo here and I’ve managed to set up a pretty functional multilingual (English/Korean) site over the past two weeks. I’m currently using this code for my language selector in my nav menu.

<div class="lang-menu">
{{ range $.Site.Home.AllTranslations }}
<li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
{{ end }}

This code currently redirects to the homepage of the translated site. Is it possible to have the language selector link to the translated version of the current page?

For example… translates to

I want translates to


This might help:

This might help too:

Yes, but it can be confusing for users if options change in the UI. If they see Korean in one menu but not another they may conclude something is broken. A better way to handle this at the page level is to present the translations separately:

{{ if .IsTranslated }}
  {{ i18n "translation" }}:
  {{ range .Translations }}
    <a href="{{ .RelPermalink }}">{{ default .Lang .Language.LanguageName }}</a>
  {{ end }}
{{ end }}

This could also be used to build out a language selector jump nav but keep in mind it’s not the best pattern to use unless users are trained.

Another thing to consider is, what happens if there is no translation of the page. I recommend using a conditional to set the template to send the viewer to the top page or an index page of some sort, that will get set up when hugo builds the site.