Language switcher disappears from menu when language is switched

support
1

I added a language switch to a menu but it disappears (the select element only, the rest of the menu stays) when I navigate away from the home page. Probably missing something basic, still learning Hugo.

This is the code in components/language-switcher.html to switch from one language to another:

{{ $class := .Class }}
{{ $context := .Context }}
{{ $pageLang := $context.Lang }}
{{ $base:= urls.Parse site.Home.Permalink }}
{{ $siteLanguages := site.Home.AllTranslations }}
{{ $pageLink := replace (replace $context.RelPermalink (add $pageLang "/") "") $base.Path "/" }}

{{ if $context.IsTranslated }}
  <select class="{{ $class }}" onchange="location = this.value">
    {{ range $siteLanguages }}
      {{ if eq (string $pageLang) (string .Language) }}      
        <option
          id="{{ .Language }}"
          value="{{ replace (add .RelPermalink $pageLink) `//` `/` }}" selected>
          {{ .Language.LanguageName }}
        </option>
      {{ else }}
        <option
          id="{{ .Language }}"
          value="{{ replace (add .RelPermalink $pageLink) `//` `/` }}">
          {{ .Language.LanguageName }}
        </option>
      {{ end }}
    {{ end }}
  </select>
  <div class="select-arrow">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
      <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
    </svg>
  </div>
{{ end }}

Changing from en to fr works ie redirect to /fr.

This is the menu in header.html called from layouts/partials/essentials:

<div class="top-menu">
  <nav class="container flex relative flex-wrap items-center flex-row justify-end">
    <ul class="navbar-nav order-1 hidden text-sm lg:flex w-full pb-6 lg:order-1 lg:w-auto lg:space-x-2 lg:pb-0 xl:space-x-8">
      {{ $currentPage := . }}
      {{ range site.Menus.topmenu }}
      {{ $menuURL := .URL | absLangURL }}
      {{ $pageURL:= $currentPage.Permalink | absLangURL }}
      {{ $active := eq $menuURL $pageURL }}
      {{ if .HasChildren }}
      <li class="nav-item nav-dropdown group relative">
        <span class="nav-link text-slate-100 {{ range .Children }}
                    {{ $childURL := .URL | absLangURL }}
                    {{ $active := eq $childURL $pageURL }}
                    {{ if $active }}active{{ end }}
                  {{ end }} inline-flex items-center">
          {{ .Name }}
          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20">
            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
          </svg>
        </span>
        <ul class="nav-dropdown-list lg:group-hover:visible lg:group-hover:opacity-100">
          {{ range .Children }}
          {{ $childURL := .URL | absLangURL }}
          {{ $active := eq $childURL $pageURL }}
          <li class="nav-dropdown-item">
            <a class="nav-dropdown-link {{ if $active }}
                          active
                        {{- end -}}" {{ if findRE `^http` .URL }} target="_blank" rel="noopener" {{ end }} href="{{- if findRE `^#` .URL -}}
                          {{- if not $.IsHome -}}
                            {{- site.Home.RelPermalink -}}
                          {{- end }}
                          {{- .URL -}}
                        {{- else -}}
                          {{- .URL | relLangURL -}}
                        {{- end -}}">
              {{ .Name }}
            </a>
          </li>
          {{ end }}
        </ul>
      </li>
      {{ else }}
      <li class="nav-item">
        <a class="nav-link text-slate-100 hover:text-slate-300 {{ if $active }}active{{- end -}}" {{ if findRE `^http` .URL }} target="_blank"
          rel="noopener" {{ end }} href="{{- if findRE `^#` .URL -}}
                    {{- if not $.IsHome -}}
                      {{- site.Home.RelPermalink -}}
                    {{- end }}{{- .URL -}}
                  {{- else -}}
                    {{- .URL | relLangURL -}}
                  {{- end -}}">{{ .Name }}</a>
      </li>
      {{ end }}
      {{ end }}
    </ul>
    {{ partial "components/language-switcher" (dict "Context" . "Class" "txt-select") }}
  </nav>
</div>
2

Here’s my repo, created a fresh one without any customisations, only added the language switcher.

Published the site to GitHub. If you go to About or Elements, language switcher disappears.

3

Because you don’t have any french content.

4

Embarrassingly basic, thank you.

What’s the deal with the 404 page though? It sits in themes/hugoplate/layouts and when go to the 404 page from the menu or to /foo to trigger the 404 error, language switch is gone.

How do I fix that? (tried creating layouts/404.html – didn’t work)

5

Please raise an issue with the theme author.

https://github.com/zeon-studio/hugoplate/issues

6

OK, I will.

On a relevant topic (still trying to get my head around this) I have copied index.html from themes/layouts to layouts to customise it. Now the French homepage shows content from index.html in layouts.

Where do I place the French version of the home page?

7

Homepage will be rendered from _index.md of the corresponding language subdir. For your repo, French homepage will be rendered from here.

Also make sure to set defaultContentLanguage param in hugo.toml as per standard multilingual configuration to prevent any issues.

8

Thank you for your help guys so far.

Have a follow up question.

In my params.toml, I have defined this button:

[demo_button]
enable = true
label = "book a demo"
link = "demo"

Then I call it with:

{{ if site.Params.demo_button.enable }}
        <a
          href="{{ site.Params.demo_button.link | relLangURL }}"
          class="btn btn-white text-black bg-white mx-2 hidden xl:inline-block">
          {{ site.Params.demo_button.label }}
        </a>
      {{ end }}

How do I translate demo_button to French? I know there’s the T function but am not sure how to implement it in my scenario.

I have added a key to i18n/fr.yaml:

- id: book_demo
  translation: Réserver une Démo
9

All good, figured it out by calling i18n function:

{{ if site.Params.demo_button.enable }}
        <a
          href="{{ site.Params.demo_button.link | relLangURL }}"
          class="btn btn-white text-black bg-white mx-2 hidden xl:inline-block">
          {{ i18n "book_demo" site.Params.demo_button.label }}
        </a>
      {{ end }}