Multi-level blocks

support
1

Id like to be able to have multiple levels of nested templates.

I have my _default/baseof.html for the site which has a “main” block… all well and good. However I’m building out my sections and I’m encountering a lot of repetition.

For each section, I have the following in section/list.html:

{{ define "main" }}
  <section class="container my-2" style="max-width: 700px !important">principles/list</section>
  <section class="container my-2" style="max-width: 700px !important"><!-- headline -->{{ partial "infrastructure/breadcrumbs.html" . }}</section>
  {{ partial "headline.html" . }}
  <section class="container my-5">
    <h2 title="title?">title</h2>
    <p>
      Thig àm nuair a dh’fhalbhas an t-acras agus thèid an t-uisge a-mach air an talamh. Bidh a h-uile càil air a chùlaibh, agus seasaidh an latha ri teachd mar theine ann an adhar gorm. Cumaidh iad suas an sgàil agus cuiridh iad air falbh an t-eagal a
      bh’ aca, oir chan eil dòigh air faighinn air ais an t-àm a chaidh seachad. Cuiridh iad an aire air adhart gu coilltean mòra agus sruthan glan, a’ sireadh sìth an cois an nàdur.
    </p>
    {{ partial "cards-section.html" (dict "context" . "SectionName" "principles") }}
  </section>
  {{ partial "connect.html" . }}
  {{ partial "our-customers.html" . }}
{{ end }}

The html section with the “title” is the only difference for these high-level section pages as I store the rest of the differences in the front matter.

What I would like to do is have a template that inherits from _default/baseof.html and implements:

{{ define "main" }}
  <section class="container my-2" style="max-width: 700px !important">principles/list</section>
  <section class="container my-2" style="max-width: 700px !important"><!-- headline -->{{ partial "infrastructure/breadcrumbs.html" . }}</section>
  {{ partial "headline.html" . }}
 {{ block "weeBit" . }}{{ end }}
  {{ partial "connect.html" . }}
  {{ partial "our-customers.html" . }}
{{ end }}

This way my section/list.html would only need to have:

{{ define "weeBit" }}
  <section class="container my-5">
    <h2 title="title?">title</h2>
    <p>
      Thig àm nuair a dh’fhalbhas an t-acras agus thèid an t-uisge a-mach air an talamh. Bidh a h-uile càil air a chùlaibh, agus seasaidh an latha ri teachd mar theine ann an adhar gorm. Cumaidh iad suas an sgàil agus cuiridh iad air falbh an t-eagal a
      bh’ aca, oir chan eil dòigh air faighinn air ais an t-àm a chaidh seachad. Cuiridh iad an aire air adhart gu coilltean mòra agus sruthan glan, a’ sireadh sìth an cois an nàdur.
    </p>
    {{ partial "cards-section.html" (dict "context" . "SectionName" "principles") }}
  </section>
{{ end }}

I’m just not sure I understand how to do this…

GitRepo: nkdAgility/NKDAgility.com at topic/17-develop-list-pages (github.com)

2

Sorry, there’s nu such thing as layout inheritance or nested blocks with Hugo. But you have multiple possibilities to achive what you want.

  • you could define the common parts in baseof.html and reduce the main block to your variable content. (or to partials included in baseof.

    you may have a dedicated baseof.html for various page kinds,… see Section templates | Hugo and Template lookup order | Hugo. If that is for all your sections, layouts/_default/section.html might be sufficient.

  • you could create a “weeBit” partial with some logic to decide about the content (if/else,) by section name or .IsSection

you may also want to extract your content to _index.html

{{ define "weeBit" }}
  <section class="container my-5">
    {{ .Content }}
    {{ partial "cards-section.html" (dict "context" . "SectionName" "principles") }}
  </section>
{{ end }}

---
---
## myTitle

Thig àm nuair a dh’fhalbhas an t-acras agus thèid an t-uisge a-mach air an talamh. Bidh a h-uile càil air a chùlaibh, agus seasaidh an latha ri teachd mar theine ann an adhar gorm. Cumaidh iad suas an sgàil agus cuiridh iad air falbh an t-eagal abh’ aca, oir chan eil dòigh air faighinn air ais an t-àm a chaidh seachad. Cuiridh iad an aire air adhart gu coilltean mòra agus sruthan glan, a’ sireadh sìth an cois an nàdur.
1 Like
3

I settled for a baseof.html with multiple blocks and defaults…

<!doctype html>
<html lang="{{ or site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
  <head>
    {{ partial "infrastructure/head.html" . }}
  </head>
  <body>
    {{ partial "infrastructure/header.html" . }}

    {{ block "breadcrumbs" . }}
      <section class="container my-2">
        {{ partial "infrastructure/breadcrumbs.html" . }}
      </section>
    {{ end }}

    {{ block "headline" . }}
      <section class="container my-2">
        {{ partial "headline.html" . }}
      </section>
    {{ end }}

    {{ block "main" . }}
      <section class="container my-2">
        {{ partial "sections.html" . }}
      </section>
    {{ end }}

    {{ partial "connect.html" . }}

    {{ block "siteSectionCallback" . }}
      <section class="container my-2 siteSectionCallback"></section>
    {{ end }}

    {{ partial "our-customers.html" . }}

    {{ partial "infrastructure/footer.html" . }}
    {{ if eq hugo.Environment "development" }}
      <section class="container my-2">
        <p>This is content visible only in development.</p>
        <table class="table table-striped table-bordered">
          <thead>
            <tr>
              <th>Node</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>debug</td>
              <td><pre>{{ debug.Dump .Params }}</pre></td>
            </tr>
            <tr>
              <td>This Page</td>
              <td>Template not set</td>
            </tr>
            <tr>
              <td>Template</td>
              <td>{{ block "template" . }}{{ end }}</td>
            </tr>
            <tr>
              <td>Layout</td>
              <td>{{ .Layout }}</td>
            </tr>
            <tr>
              <td>Kind</td>
              <td>{{ .Kind }}</td>
            </tr>
            <tr>
              <td>Type</td>
              <td>{{ .Type }}</td>
            </tr>
            <tr>
              <td>Section</td>
              <td>{{ .Section }}</td>
            </tr>
            <tr>
              <td>CurrentSection</td>
              <td>{{ .CurrentSection }}</td>
            </tr>
            <tr>
              <td>Section Info</td>
              <td>
                {{ if and .IsSection .Parent }}
                  <p>This is a subsection (child section of {{ .Parent.Title }}).</p>
                {{ else if .IsSection }}
                  <p>This is a top-level section.</p>
                {{ end }}
              </td>
            </tr>
            <tr>
              <td>Child Sections</td>
              <td>
                {{ if gt (len .Sections) 0 }}
                  <p>This section has child sections.</p>
                  <ul>
                    {{ range .Sections }}
                      <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
                    {{ end }}
                  </ul>
                {{ else }}
                  <p>This section has no child sections.</p>
                {{ end }}
              </td>
            </tr>
            <tr>
              <td>ansestors</td>
              <td>
                <ol>
                  {{ range .Ancestors.Reverse }}
                    <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
                  {{ end }}
                  <li>{{ .Title }}</li>
                </ol>
              </td>
            </tr>
            <tr>
              <td>subsections</td>
              <td>
                <ul>
                  {{ range .Sections }}
                    <li>
                      <a href="{{ .Permalink }}">{{ .Title }}</a> ()
                      {{ if .IsSection }}
                        <ul>
                          {{ range .Sections }}
                            <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
                          {{ end }}
                        </ul>
                      {{ end }}
                    </li>
                  {{ end }}
                </ul>
              </td>
            </tr>
            <tr>
              <td>pages</td>
              <td>
                <ul>
                  {{ $groups := .Pages.GroupBy "Type" }}
                  {{ range $groups }}
                    <li>
                      {{ .Key }}
                      <!-- This is the group key, which is the "Type" -->
                      <ul>
                        {{ range .Pages }}
                          <li>
                            <a href="{{ .Permalink }}">{{ .Title }}</a>
                            [Type: {{ .Type }}]
                            {{ if .Layout }}[Layout: {{ .Layout }}]{{ end }}
                          </li>
                        {{ end }}
                      </ul>
                    </li>
                  {{ end }}
                </ul>
              </td>
            </tr>
          </tbody>
        </table>
      </section>
    {{ end }}

  </body>
</html>