How menu multiple pages in folder

support
1

I have in “content” a folder named “about” with multiple page.md files in it which I want to link to from the menu.

In my config.toml file I have

[[menu.main]]
  name = "About"
  weight = 35
  identifier = "about"
  url = "/About/"

In the menu I only have About and clicking it gives me a page with no links titled “Abouts”. What am I doing incorrectly?

(I’m using the “Mainroad” theme.)

2

I think you might need a list template. (Either /layouts/_default/list.html or /layouts/section/about.html:

For /layouts/_default/list.html

{{ range where .Site.Pages "Section" "about"}}
    Your code here
{{end}}

Basically you want to list all the pages in the /about/ section (any first subdirectory under /content/ is a section)

For /layouts/section/about.html

{{ range .Data.Pages }}
    Your code here
{{end}}

The context of .Pages (.Data.Pages and .Site.Pages) changes from one list template to another. .Data.Pages will be in the context of the current section node.

3

I’m sorry, I didn’t see that you were using the mainroad theme.

Mainroad theme only has one list file, layouts/_default/list.html which contains:

{{- $paginator := .Paginate ( where .Data.Pages "Section" "post") }}

So it’s only going to display pots from the “post” section (/content/post)

you have two options here:

you can modify the default list page line #9 to

{{- $paginator := .Paginate .Site.Pages }}

or

you can copy layouts/_default/list.html (and don’t edit it) to layouts/section/about.html so your html layout can remain consistent with the theme, and modify line #9 to

{{- $paginator := .Paginate ( where .Data.Pages "Section" "about") }}

This way you can have a list template for your /about section.

Whichever option works best for you. I’m not sure if this will throw off anything else in the theme, but that’s how you could articles from the /about section.

4

Thank you Hash_Borgir. I had thought that the list template was more or less for pasting bits together into one page, and had not realized that it would be used to create a list of pages with links.

I followed your second option, assuming you mean to copy the code in the layouts directory in the root of the project and not inside the themes directory. I modified the code based on the second option. I can bring the pages up by entering the url into the browser’s url bar (x.com/about/faq/) so I know they are being built. However, I still cannot get to them through menu navigation. My menu nav is still as in my first post.

Let me make this very concrete. I have content/about/ and inside the about folder I have two files (about.md and faq.md). I want people to be able to click through from the main menu and have option to click on either link and go to either page. I’m still not sure where I am off track. This is a very primitive need so I’m sure I’m getting something very simple wrong. Hugo seems so elegant. But the documentation still has me confused. Thanks in advance for help rendered!

5

In addition to the list page at /layouts/section/about.html, you can simply just create two submenu entries using the “parent=” directive.

See https://gohugo.io/content-management/menus/#what-is-a-menu-in-hugo for more information.

Just create two submenus and link them to individual pages, as well as having a list template so /about can list both pages.

[[params.menu]]
  name = "About"
  weight = 35
  identifier = "about"
  url = "/about/about"

[[params.menu]]
  name = "FAQ"
  weight = 36
  identifier = "about"
  url = "/about/faq"
  parent = "about"

I am not sure… but I think this is how you would create your sub menus, linking to each page.

6

hash_Borgir, when I did that the About menu went away but then by adding

menu = ["main"]

in the front matter of about.md and faq.md they were added to the main menu (not quite where I want them).

In the link to the documentation (I see .20 has landed) an example is given in YAML

menu:
  main:
    parent: 'extras'
    weight: 20

How would I format that in TOML?

I think the documentation would benefit from adding several small actual use cases. I read the documentation again but I am still not clear about what must be in config.toml and what must be in the front matter of the page I am linking to. Can it be done either way or must it be in both places?

7

The reason why it might have vanished is because my information might be from a few older versions. I still need to catch up.

		{{- range sort .Site.Menus.main }}
		<li class="menu__item {{if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }}menu__item--active{{end}}"><a class="menu__link" href="{{ .URL }}">{{ .Name | upper }}</a></li>
		{{- end }}

This is the code for the menu.html partial for the mainroad theme. It’s just iterating over .Site.Menus.main. I am used to having done .Site.Params.menu.main etc. Change the code to this, and your menu will come back and possibly work:

[menu]
[[menu.main]]
  name = "About"
  weight = 35
  identifier = "about"
  url = "/about/about"

[[menu.main]]
  name = "FAQ"
  weight = 36
  identifier = "about"
  url = "/about/faq"
  parent = "about"

As for your question bout yaml->toml, try something like this, though I’m not sure what this would accomplish.:

[menu]
[[menu.main]]
    parent = "extras"
    weight = 20