Languages not detected by Hugo

support
1

For some reason I do not succeed in adding a language selector.

This is my config:

baseURL = "https://papasmurf.nl/"
theme = "m10c_modified"
title = "papasmurf.nl"
defaultContentLanguage = "en"
paginate = 8

[menu]
  [[menu.main]]
    identifier = "posts"
    name = "Blog"
    weight = 1
    url = "/"
  [[menu.main]]
    identifier = "about"
    name = "Jan"
    weight = 2
    url = "/jan"
  [[menu.main]]
    identifier = "janban"
    name = "JanBan"
    weight = 3
    url = "/janban"
  [[menu.main]]
    identifier = "tags"
    name = "Tags"
    weight = 4
    url = "/tags/"

[params]
  author = "Jan van Veldhuizen"
  description = "Techno-Talk, Languages and Smurfy Chit-chat"
  menu_item_separator = " - "
  #avatar = "images/avatar.jpg"
  avatar = "images/about/jan.jpg"

  [[params.social]]
    icon = "gitlab"
    name = "Gitlab"
    url = "https://gitlab.com/janware"
  [[params.social]]
    icon = "twitter"
    name = "Twitter"
    url = "https://twitter.com/grandasmurfo"
  [[params.social]]
    icon = "linkedin"
    name = "LinkedIn"
    url = "https://linkedin.com/in/janvv"

 # Default theme
[params.style]
  darkestColor = "#242930"
  darkColor = "#353b43"
  lightColor = "#afbac4"
  lightestColor = "#ffffff"
  primaryColor = "#57cc8a"

#[params.style]
#  darkestColor = "#315659"
#  darkColor = "#253031"
#  lightColor = "#96a879"
#  lightestColor = "#fff"
#  primaryColor = "#dad865"

[languages]
  [languages.en]
    weight = 1
    languageCode = "en"
    languageName = "English"
    [[languages.en.menu.main]]
      identifier = "posts"
      name = "Blog"
      weight = 1
      url = "/"
    [[languages.en.menu.main]]
      identifier = "about"
      name = "Jan"
      weight = 2
      url = "/jan"
    [[languages.en.menu.main]]
      identifier = "janban"
      name = "JanBan"
      weight = 3
      url = "/janban"
    [[languages.en.menu.main]]
      identifier = "tags"
      name = "Tags"
      weight = 4
      url = "/tags/"

  [languages.nl]
    weight = 2
    languageCode = "nl"
    languageName = "Nederlands"
    [[languages.nl.menu.main]]
      identifier = "posts"
      name = "Blogje"
      weight = 1
      url = "/"
    [[languages.nl.menu.main]]
      identifier = "about"
      name = "Janneman"
      weight = 2
      url = "/jan"
    [[languages.nl.menu.main]]
      identifier = "janban"
      name = "JanBan"
      weight = 3
      url = "/janban"
    [[languages.nl.menu.main]]
      identifier = "tags"
      name = "Tegs"
      weight = 4
      url = "/tags/"
  [languages.eo]
    weight = 3
    languageCode = "eo"
    langaugeName = "Esperanto"

And this is the partial I tried to make for the language selector:

{{ if .Site.IsMultiLingual }}
<nav aria-label="Language switcher">
  <ul>
    {{ range .Site.Languages }}
    {{ if eq . $.Site.Language }}
    <li><span aria-label="{{ i18n "ariaLanguage" }}{{ .LanguageName }}">{{ .LanguageName }}</span>
      {{ end }}
      {{ end }}
      <ul aria-labelledby="dropdown-title">
        {{ range $.Translations }}
        <li><a title="{{ .Language.LanguageName }}" href="{{ .Permalink }}" aria-label="{{ i18n "ariaTranslation" }}{{ .Language.LanguageName }}">{{ .Language.LanguageName }}</a></li>
      </ul>
        {{ end }}
    </li>
  </ul>
</nav>
{{ else }}
why not multilingual ???
{{ end }}

<!-- another attempt -->
<div>
   <ul class="language-list">
     {{ range $.Site.Home.AllTranslations }}
     <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
     {{ end }}
   </ul>
</div>

<!-- and yet another -->
<div class="dropdown-content">
  {{ if .Site.IsMultiLingual }}
  {{ range $.Translations }}
  <a title="{{ .Language }}" href="{{ .Permalink }}">{{ .Language }}</a>
  {{ end }}
  {{ end }}
</div>

You can see I tried a few different approaches to display the language selector, but somehow it doesn’t work.

It must me something stupid simple that I don’t see… :frowning:

If you want to see my entire source code then go to PapaSmurf / papasmurf.nl · GitLab

2

This works for me:

{{ range .Translations }}
<li><a rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .Language.LanguageName }}</a></li>
{{ end -}}

I have implemented it in me Zen theme and use it on a number of sites.

For internal pages in the menu you should be using pageRef, url is for external links.

3

I doesn’t do anything.

Even if I add this, it doesn’t display anything:

{{ range .Site.Languages }}
<ul>
  <li>{{ .LanguageName }}</li>
</ul>
{{ end }}
4

Can you post a link to your repo?

5

I already did :smiley:

6

you call the partial inside {{ with }} scope. move it outside.

More about with function:

7

Thx. That makes sense. I hadn’t noticed that.
But the fix to move it to the right place doesn’t change anything. See the new version on https://papasmurf.nl

8

pass the . dot context.

{{ partial "language_switcher.html" . }}
2 Likes
9

Sorry, missed that.

@pamubay Have correctly pointed out the missing context.

Adding it will result in a number of errors in “language_switcher.html” from all the experimental code.

Side note, instead of using “.Site” and “$.Site” where needed you can use “site” as a replacement everywhere. Hugo will then figure it out by itself.

1 Like
10

YES! The . was the missing thing. Lack of experience :slight_smile:
These are my first steps in using Hugo instead of Wordpress. The website is amazingly faster now.
And there’s a lot less overhead in the maintenance of the website. Besides that, I like to learn a new tool.

Thanks!

3 Likes
11

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