Troubles with menu on a multi language website

support
1

Hi lovely Hugo community

I’m quite new in the hugo world (moved from Jekyll) and as I face a first problem/question, I thought I will give this form a try.

I’m working on a static website with four languages (English, French, German and Italian). I decided to go with the multi language support with only one folder but multiple .md-files (one per language). So my structure look like this:

content/
       index.en.md
       index.de.md
       index.fr.md
       index.it.md

       section1/
               index.en.md
               index.de.md
               index.fr.md
               index.it.md

       section2/
                _index.en.md
                _index.de.md
                _index.fr.md
                _index.it.md
                subsection21/
                             index.en.md
                             index.de.md
                             index.fr.md
                             index.it.md

My goal is to get a menu with the entries: section1 and section2. I first tried to use the sectionPagesMenu = "main" option but this didn’t work out. My guess is that because section1 is a single page, it’s not a proper section and that’s why it is not working. In my second attempt, I added the menu param in the front matter in every .md-file but this didn’t work either. My next step would be to add the menu per language in the config.yaml but I would prefer it the menu would be generated automatically from the folder/file structure (my first attempt) or by the definition in the front matter (my second attempt). Having to add a menu entry in the config file for every new section seems prone to errors/forgetting as I experienced it in a Jekyll project.

2

Hi there,

These need to be _index.xx.md

If this was a typo, or if this does not solve your problem, please have a read about Requesting Help and follow the suggestions, specifically about including a link to your site repo so that we can reproduce your issue.

3

@pointyfar Thanks for your help.

I now managed to get the menu. The next problem I’m facing is the following. I want to order the section/menu entries in the menu. Therefore, I added weights to the front matter of the .md-files. But so far this doesn’t work and the menu entries are alphabetically ordered.

You can find the repository here.

4

You have this in your config:

SectionPagesMenu: "main"

And you have (something like) this in your layout:

{{ range site.Menus.main }}
  {{ .Name }}
{{ end }}

They are both referencing the “main” menu. However, in your content:

title: "About"
menu:
  docs:
    title: "about"
    weight: 10

You are attaching the pages to the “docs” menu, and you are giving them weights in the “docs” menu, not the “main” menu.

You can see this by printing out both menus and the weights:

{{ range site.Menus.main }}
  {{ .Name }} / {{ .Weight }} <br>
{{ end }}

{{ range site.Menus.docs }}
  {{ .Name }} / {{ .Weight }} <br>
{{ end }}
5

Before @pointyfar’s reply, I just moved the weight out of menu: docs and this seemed to have worked (although it is obviously wrong if I use docs while having main configured in the config file). This “working” solution can be found here

After I read @pointyfar’s reply, I adjusted the menu to main. The corresponding repo can be found here. When I iterate through site.Menus.main I now get the following

image
image163×564 24.8 KB

I’m quite confused now how these entries with weight 0 suddenly appear.

6

It’s because of SectionPagesMenu: "main": Menu templates | Hugo

This will create a menu with all the sections as menu items

7

I would like to use SectionPagesMenu: "main" and assign the section weights so that the menu entries are created automatically but ordered according to the weights. Is this possible? If yes, how can I achieve it / what did I do wrong?

8

This may get a bit confusing, but maybe an example helps:

{{ range site.Menus.main }}
    {{ .Name }} / {{ .Title }} / {{ .Weight }}
    <br>
    {{ with .Children }}
      {{ range . }}{{ .Name }}<br>{{ end }}
    {{ end }}
    <hr>
{{ end }}

As an example,

# about/qa.en.md
title: "Q&A"
menu:
  main:
    title: "q&a"
    parent: "about"
    weight: 40

In this page, you attach it to its parent Menu item "about"

From Menu entry variables | Hugo

.Parent

string Name (or Identifier if present) of this menu entry’s parent menu entry . The parent key, if set for the menu entry, sets this value. If this key is set, this menu entry nests under that parent entry, else it nests directly under the .Menu .

If we then look at the "about" page:

# about/_index.en.md
title: "About"
menu:
  main:
    title: "about"
    weight: 10

You don’t actually define the .Name or .Identifier. When we look at the output of the range example I had above, you can see that there are the following:

About / about / 10
about / / 0

The one with both .Name and .Title is the one menu item defined when you set the menu frontmatter in about/_index.en.md.

The other one is the .Parent node that you are attaching the child menu items to (as defined in about/qa.

About != about

So Hugo renders both as separate menu items.

Solution

You could try to define the .Name instead of the .Title of the page’s own menu entry, ie:

# about/_index.en.md
menu:
  main:
    name: "about"
    weight: 10
9

@pointyfar Replacing title with name and removing SectionPagesMenu: "main" finally solved my issue(s). Thanks a lot for the guidance.