Listing the menu per section?

support
1

Hi! I’m very new to Hugo and i’m confused with what i’m doing. I’m trying my best to learn and to create my own documentation theme from scratch to have a fully customized theme.

I’m creating a documentation site that has at least 3 sections at the minimum. What I want is to list the section pages like this:

image
image.png604×926 12.1 KB

I want to do this dynamically so I don’t need to fiddle with the config.toml everytime a page needs to be created. My goal is to complete this documentation site to the authors so they can create the hugo content without editing anything with the config file.

This is what my sidebar partial looks like:

  <div class="sidebar-section py-3">

    {{ $currentPage := . }} {{ range .Site.Menus.main }}
    <h4 class="{{ if $currentPage.HasMenuCurrent " main " . }}active{{ end }}">
      <a href="{{ .URL }}" class="active">
        <span>{{ .Name }}</span>
      </a>
    </h4>

    {{ end }}

    {{ $sectionPages := where .Site.Pages "Section" .Section }} {{ if ge (len $sectionPages) 1 }}
    <ul class="sub-menu mb-5 ml-4">
      {{ range $sectionPages }}
      <li>
        <a href="{{ .URL }}">{{ .Title }}</a>
      </li>
      {{ end }}
    </ul>
    {{ end }}

  </div>

One of my section pages looks like this:

image
image.png1278×438 35.4 KB

Brand Guidelines and Digital Guidelines are menu items that I created on my config.toml page while the pages below are ranged as Section Pages. The way that my range function also lists “Brand Guidelines” drives me nuts. This is supposed to be the title of the section. I’ve already read the docs, watched youtube tutorials etc. I don’t want to give up but i’m stumped. I know that my method is incorrect and I hope that someone here would help me figure this out.

Here is my bitbucket if it helps: https://bitbucket.org/annady24/hugo-documentation-site/src/master/

Thanks!

2

Hi,

It’s difficult to say where you may be going wrong without seeing the config and the site structure. It would really help if you posted a sample repo that we can look at and test. :slight_smile:

3

Hi! I’ve edited my post to include my repo.

4

If you need to include all your pages (or some of them) on the sidebar with no manual configuration whatsoever then Hugo Menus is not the right choice.

You should simply grab .Site.Data.Pages and work some template ranging and conditional on them in order to build the perfect Sidebar.

It will take more work for you to determine current pages and sections, but not this much.

5

I’m testing .Site.Data.Pages right now and its not working.

    {{ range .Site.Data.Pages }}
    <li>{{.Title}}</li>
    {{ end }}
6

Sorry I just meant .Site.Pages as in “your typical pages loop/range”