Confused about templates for deeper content

support
1

I’m wondering how I need to organize my templates to style content 3 levels deep.

This is my content structure

content/example

  • _index.md
  • a/_index.md
  • a/_article.md
  • b/_index.md
  • b/_article.md
  • b/_article.md
  • c/_index.md
  • c/_article.md

For all 3 levels I need a different template. How do I accomplish this?

layouts/example

  • list.html (first level _index.md)
  • ???.html (second level _index.md)
  • single.html (3 level _article.md)

Now quite sure how to name the second template? And how do I write the range queries for the two list.html files.

2

Currently this cannot be done in a straightforward way. Layouts for Nested Sections are not supported.

But there is a workaround for 2 levels deep. But 3 levels? I have no idea.

EDIT
For the 3rd level (as you call it) you can use layout in the front matter of the posts that belong in that Nested Section.

3

In Hugo 0.33 (coming soon) Hugo respects layout and type in sections (and other list types), which will improve this.

4 Likes
4

Thanks Guys.

I figured it out. The following code is working for my situation

{{ define "main" }}
<div class="wrapper m6-b">
  {{ if .Params.page_title}}
  <div class="w-medium h-center text-center m3-b">
    <h2 class="f2">
        {{.Params.page_title}}
    </h2>
    {{.Content}}
  </div>
  {{ end }}
  {{- if .Sections -}}
    <div class="grid grid-thirds grid-gap-medium m3-b">
      {{- range .Sections -}}
      <div class="grid-item">
        {{ partial "kennis-card" .}}
      </div>
      {{- end -}}
    </div>
  {{ else }}
  <div class="wrapper">
    <div class="w-medium h-center m6-b">
      <div class="m3-b">
        <h1 class="f1 b-bottom m3-b">{{.Title}}</h1>
        <div class="m2-b">
          {{.Content}}
        </div>
        <h2 class="f2 m1-b">Artikelen</h2>
        {{ range $index, $element :=  (where .Data.Pages "Type" "kennisbank") }}
          <a href="{{ .RelPermalink }}" class="card f5 no-underline gray p1-lr p1-t m1-b">
            <span class="m1-b">{{.Title}}</span>
          </a>
        {{ end }}
      </div>
    </div>
  </div>
  {{- end -}}
  </div>
</div>
{{ end }}