Site menu on all pages from content page front matter

support
1

Books and Hugo web pages have the site’s menu defined in the root directory’s config.toml. I’m trying to use the Justice theme for my revised company website. This theme puts menu information on each content page’s front matter; for example,

---
title: Introduction
date: "2022-10-13"
menu:
  main:
    weight: 1
---

What I’ve not found is how to assemble these specifications into a menu bar at the top of each page (and as a hamburber menu on small screens). Greping for ‘menu’ in the theme directory finds nothing.

How do I create the menu from these front matter contents? Or, do I remove them and put the menu in config.toml?

Thanks in advance,

Rich

2

Your site’s config and the front matter in content files are places where you can create the menu and define what’s included in the menu.

To display a menu on your page, a layout template need to render the menu. Check out the docs on Menu Templates for details.

3

Tim,

Thank you. I had seen that page with the sidebar menu and don’t know how to
modify it for menus on the top of each page. I’ll keep looking.

Regards,

Rich

4

It looks like in the Justice theme, the main menu is rendered from layouts/partials/site-header.html. (And the footer menu is rendered by layouts/partials/site-footer.html.)

Assuming you’ve left those template partials alone, your menu should be rendering as expected. As a test, you might try this in your front matter:

menu: ["main","footer"]

That should add the content to both menus, which will then be rendered by your templates. Does that work?

5

Assuming you’ve left those template partials alone, your menu should be
rendering as expected. As a test, you might try this in your front matter:

Tim,

Yes, I’ve left them unmodified. There’s still no menu or background image on
the landing page.

menu: ["main","footer"]

Hugo server didn’t like that. For each content page the front matter is:

title:
date:
menu:
   main:
     weight:

For the nested menus there’s also a parent: parameter.

I’ve pushed the latest code to github:
GitHub - rs-aesi/my-company-website: The developing web site using the Justice theme.

Thanks,

Rich

6

Ah! Your layouts/_default/baseof.html template includes header.html, which does not render any menus. If you change that to site-header.html, you’ll see the main menu rendered.

Alternatively, you can copy the menu template bits from site-header.html into your header.html.

And you’ve probably already corrected this, but there was a missing colon on line 4 of content/_index.md that was preventing the site from building.

7

Ah! Your layouts/_default/baseof.html template includes header.html,
which does not render any menus. If you change that to site-header.html,
you’ll see the main menu rendered.

Tim,

Darn! I missed that.

And you’ve probably already corrected this, but there was a missing colon
on line 4 of content/_index.md that was preventing the site from
building.

Missed that one, too.

Now the menu includes my content/ as well as that of theme/justice/content.
I had the impression that any file external to the theme’s directory was
used and that same named file in the theme’s directories was ignored. Should
I remove theme/justice/content/ or is there a way to tell Hugo to ignore it?

Thanks for helping me learn Hugo. I need all the help I can get. :slight_smile:

Best regards,

Rich

8

A good question! I actually have zero experience with using themes, so hopefully someone else can answer that.

My instinct would be to use the theme as an example – copy and customize the parts you want, and delete the rest. On the other hand, there’s likely a very good reason themes exist as they do, so it we’d probably both be better off to learn what that is. :sweat_smile:

Happy to help!

9

These directories are merged when you build your site:

  • content
  • themes/foo/content

If the same file exists in both directories, the project level content directory wins.

Either delete or rename the themes/foo/content directory.

10

A good question! I actually have zero experience with using themes, so
hopefully someone else can answer that.

Tim,

How interesting.

My instinct would be to use the theme as an example – copy and customize
the parts you want, and delete the rest. On the other hand, there’s likely
a very good reason themes exist as they do, so it we’d probably both be
better off to learn what that is. :sweat_smile:

You’re welcome to join me in learning how to use themes to get the content
and presentation we want.

I’ve cleaned most of the menu but there are still issues.

A new thread is justified.

Rich

11

These directories are merged when you build your site:

  • content
  • themes/foo/content

Joe,

That’s good to know.

If the same file exists in both directories, the project level content
directory wins.
Either delete or rename the themes/foo/content directory.

Renamed. Now have extraneous menu items that show nothing, and one of my
nested menus has theme content, too.

A new thread will explain in detail.

Most recent changes pushed to github; URL in the new thread.

Thanks,

Rich