Nav with site home and each top section

support
1

Hi!

My website content is organized as follows:

.
├── _index.md
├── section1
│   ├── bar
│   └── foo
└── section2
    ├── bar
    └── foo

I want to achieve two things:

  1. In each page that inherits baseoff.html, I want to get the name of the “section”, in the sense that here, a section is either Section 1, Section 2, or the home page.
  2. I want to create a nav bar with urls to the home page and the two sections.

I tried to play with this blog entry, but did not manage anything.

Could you please help me on this? Thanks a lot.

2

Try this Menu Templates | Hugo. But this is recommended.

1 Like
3 
<p>Section: {{ .Section }}</p>

Define the menu in site config:

[[menu.main]]
name = 'Home'
pageRef = '/'
weight = 2
[[menu.main]]
name = 'Section 1'
pageRef = '/section-1'
weight = 2
[[menu.main]]
name = 'Section 2'
pageRef = '/section-2'
weight = 3

Then range over site.Menus.main to build your navigation. In its simplest form, something like:

{{ range site.Menus.main }}
  <a href="{{ .URL }}">{{ .Name }}</a>
{{ end }}
1 Like
4

Thanks a lot to both of you. This way of doing the menu is brilliant. I just had to change pageRef = ... to url = ... to make it work (thanks to this page in the docs).

For the {{ .Section }}, the problem is that the homepage/index is not considered a section. Therefore, {{ .Section }}is empty on the homepage. Furthermore, when in a section, this syntax does not allow to use the title given in section1/_index.md or section2/_index.md.

P.-S. : @jmooring you helped me the other day on this topic, and just so you know, I made the FAQ as you advised. I am now very happy with this solution.

5

This is how I do my menus. In every section/page I want to appear in the menu (I have header and footer menus) I add something like this in the _index.md or the page frontmatter

menu:
  main:
    name: Section1
    weight: 1

For example

---
title: Section1
url: /section1/
menu:
  main:
    name: Section1
    weight: 1
---

Then range over the menus using an example similar to the example shared by @jmooring . For footer menu, I change main to footer in the code.

In your case you can replicate the same in the _index.md at the root of content and for section1 and section2 (and remember to change the weight depending on the preferred order in the menu).

BTW, Hugo is versatile and I have seen about 4 ways to create menus with it.

1 Like