I need to make a post navigation menu, and it is different for every single post, so I can`t just use regular Hugo menus.
I think that one approach for that is to use Front Matter in this way:
navigation:
- src: '#first'
name: First
- src: #second
name: Second
And then just range it:
{{ range .Params.navigation }}
<li>
<a href="{{ .src }}">{{ .name }}</a>
</li>
{{ end }}
But I don`t know how to make this menu multi-level.
I think I should set a parent in Front Matter, but how to properly display that parent-child relationship in layouts template?
I did. But looks like {{ if .HasChildren }} / {{ range .Children }} doesn`t work with Front Matter menus.
Not sure or it is because it works only with .Site menus, or something else is on my way…
Both should work fine. You just need to define your menus in the front matter as in the docs linked above:
menu:
docs:
title: "how to use menus in templates"
parent: "templates"
weight: 130
In the above example from the docs, the page containing that front matter definition would have its own menu item as a child of the templates menu item. Assuming no other parent defined on the templates page, the templates page would then be the top level menu item of the docs menu, ie .Site.menus.docs.
Your example front matter does not seem to be defined as a menu, so menu-specific properties such as .HasChildren would not work: Menu entry variables | Hugo .
Ok, now that’s make sense. But apparently I forgot to clarify that I need links leading to the same page.
This approach forces me to create other pages, while I only need to create links to anchor on same page(i.e. navigation inside of content of one particular post):
Or Option 2: you build custom navigation from .Params in front matter. Note that you would not have .HasChildren (and other menu-specific variables) available, so you would have to treat these as regular (ie non-menu) front matter.