Menu with top level sections, how do I list the sub sections on the pages?

support
1

Note: After posting the question, I noticed that I wasn’t using the most recent Hugo version. After updating (0.60.1 -> 0.69.2) my original problem went away but now I have a new one, so I edited the relevant parts of my question.

Let’s say I’m building a site about books. This is the structure I want:

fantasy
    george-rr-martin
        game-of-thrones.md
        clash-of-kings.md
    jrr-tolkien
        lord-of-the-rings.md
adventure
    daniel-defoe
        robinson-crusoe.md

So far, I have read:

My understanding so far is that fantasy/adventure are sections in Hugo terminology, and the author names below should probably be sub-sections.

And “Menus” says: “If all you want is a simple menu for your sections, see the Section Menu for Lazy Bloggers”, this is exactly what I want.

Based on all this, here’s what I currently have:

hugo new site hugo-menu-example
cd hugo-menu-example
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml
echo 'sectionPagesMenu = "main "' >> config.toml

hugo new fantasy/_index.md
hugo new fantasy/george-rr-martin/_index.md
hugo new fantasy/george-rr-martin/game-of-thrones.md
hugo new fantasy/george-rr-martin/clash-of-kings.md
hugo new fantasy/jrr-tolkien/_index.md
hugo new fantasy/jrr-tolkien/lord-of-the-rings.md
hugo new adventure/_index.md
hugo new adventure/daniel-defoe/_index.md
hugo new adventure/daniel-defoe/robinson-crusoe.md

hugo server --buildDrafts

This gives me a top navigation bar with links named “Adventure” and “Fantasy”.

But when I click on those links, I get to sub-pages with the correct headline (e.g. http://localhost:1313/fantasy/, “Fantasy”), but otherwise the page is empty.

How can I create a list of sub-sections there?
What I like to have is similar to the sub sections page showing a list of its child .md files, like http://localhost:1313/fantasy/george-rr-martin/ showing auto-generated links to game-of-thrones.md and clash-of-kings.md.

And maybe a basic question, but it’s not clear to me yet:
At Section Menu for Lazy Bloggers, there’s also this code example:

<nav class="sidebar-nav">
    {{ $currentPage := . }}
    {{ range .Site.Menus.main }}
    <a class="sidebar-nav-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
    {{ end }}
</nav>

This sounds like I have to copy and paste it somewhere into my templates…but there are no templates created by me, since I’m using a ready-made theme (Ananke) from Hugo’s theme gallery.

2

Welcome on the forum! :wave:

The content on those ‘Fantasy’ and ‘Adventure’ pages are rendered by Hugo with a ‘section page’ template.

That means your theme needs to have a template file (like section.html) to render those pages. Else Hugo has nothing to build/render on those ‘Fantasy’ and ‘Adventure’ pages.

Here’s which templates Hugo looks for when rendering those pages.

If you want to render both ‘Adventure’ and ‘Fantasy’ with the same template, you’ll need to make a layouts/_default/list.html or layouts/_default/section.html file with code that tells Hugo how you want those pages to show.

3

Thanks for your answer, but as far as I understand the docs, I have a section template:

So IMO Hugo should find that list.html template from the theme, right?

4

Okay, I got it to work now.
I took the list.html template from the Ananke theme and copied it to my “local” layouts dir:
/themes/ananke/layouts/_default/list.html => /layouts/_default/list.html

That still didn’t change anything, I still got an empty page.

Then I noticed that Ananke’s list template uses {{ range .Paginator.Pages }}, while all code examples on the List page templates page in the docs use {{ range .Pages }}

So I changed that in my “local” copy of Ananke’s list template, and the sub-pages “Fantasy” / “Adventure” showed the list of authors that I wanted.

So my problem is solved for now, but I don’t understand why.
I’m sure that {{ range .Paginator.Pages }} should properly work, otherwise it wouldn’t be used in the (more or less) “official” Hugo theme. So why did I have to change it into {{ range .Pages }} in my case?