Only display child menu elements associated with a specific section?

support
2

Ok, so after many hours of stumbling around in the dark, I found a solution to my problem. It turns out my lack of familiarity with the Go language was my biggest problem.

Quick summary: I made sure my sections folder name was the same as their menu names. This way I could use the {{ .Section }} variable to dynamically fetch the right menu for each section. Here is how I made sure a submenu was displayed only under the associated section:

I gave the folders in content a name without any special characters, which also excludes hyphens. The reason for this is that menus defined in Front Matter can’t contain these characters (only underscore). The file structure looks like this:

content/
  asection/ # NOT "a-section", as hyphens are not allowed
    subelement/bunch-of-files
    cover.jpg
    _index.htm
  anothersection/ # NOT "another-section"
    subelement/more-files
    subelement2/even-more-files
  cover.jpg
  _index.html
etc...

Here is the Front Matter for one of my subelemens that belongs to a section:

title: This is a subelement
menu:
  asection: # name of the section above this subelement WITHOUT hyphens

Here is the code for my sidebar:

{{ $currentPage := . }}
{{ $currentSection := .Section }}

<ul class="site-sidebar-menu">
     {{ range index .Site.Menus $currentSection }}
     <li class="button{{ with $currentPage.IsMenuCurrent $currentSection . }} button-active{{- end -}}">
         <a href="{{ .URL }}">
         {{ .Pre }}
         {{ .Name }}
         </a>
     </li>
    {{ end -}}
</ul>

The magic happens with {{ range index .Site.Menus $currentSection }}, where $currentSection outputs asection and makes the string complete: .Site.Menus.asection.

This is a way to combine two (or more?) variables, or at least their output/values. I don’t fully understand how or why this works to combine one variable with another – if someone would like to try to explain this to me, please try!

2 Likes