Is there a way to group and filter site.mainSections?

support
1

I have tried to see if it’s possible to have a fully automated navigation without configuring menus by using the internal mainSections .

In an ideal world, I would like to have a menu with links to a project’s mainSections and underneath each link a dropdown with the content files rendered per mainSection

Is there a way to achieve this?

I’ve noticed that .FirstSection does not work in the mainSections context.

So far as a workaround I managed to construct the navigation like so:

        {{ range .Site.Params.mainSections }}
          <div class="navbar-item has-dropdown is-hoverable">
            <a href="{{- . | absURL -}}" class="navbar-link">
              {{- . | title -}}
            </a>
            {{- end -}}

But I have been unable to create slices per mainSection for each dropdown item.

{{ where .Pages "Type" "in" site.Params.mainSections }} refers to Pages in the entire group of mainSections and I cannot quite figure out how to split this set per mainSection.

2

Never mind I figured it out. Here is what I did:

  1. Define some variables:
    {{- $mainSections := .Site.Params.mainSections -}}
    {{- $section := where .Site.RegularPages "Section" "in" $mainSections -}}
  1. Store the internal mainSections and their regular pages
    {{- $section_count := len $section -}}
  1. Store the length of mainSections regular pages to check for their existence.
      {{- $section_name := "" }}
      {{ range $mainSections }}
      {{- $section_name := . }}
      {{ end }}
  1. Initialize an empty variable for each mainSection and then define it within the range of the mainSections 
      {{- if ge $section_count 1 -}}
  1. If mainSections .Pages exist then…
      {{- with .Site.GetPage "section" $section_name }}
      {{- range .Sections -}}
      <div class="navbar-item has-dropdown is-hoverable">
<a href="{{- .Permalink -}}" class="navbar-link">{{- .Title -}}</a>
            <div class="navbar-dropdown">
{{- range .Pages }}
<a href="{{- .Permalink -}}" class="navbar-item">{{- .Title -}}</a>
{{- end -}}
</div>
    </div>
    {{- end -}}
    {{- end -}}
    {{- end -}}
  1. Fetch each and every one mainSection list page (including titles & Permalinks) and then under each link populate a dropdown menu with the regular pages.

Took me a while but I’m a happy camper.

Now I no longer need to configure Hugo Menus (since I get bored quite easily).

Enjoy!

1 Like