Puzzling "nested" partials not resolved properly

support
1

Hello,

I allow myself to call for help here for the first time because I feel really stuck. I am trying to build a one-page website with Hugo. The intent is that each section of the page is rendered according to a specific partial. Also, since all sections share common classes, I want to use a base section partial to wrap them properly.

Unfortunately, although Hugo seems to interpret the front matter type correctly, it uses the wrong section partial.

Here is the code I wrote so far:

  • File structure:
content
├── homeSection.md
├── genericSection.md
layouts
├── _default
│   └── index.html
└── partials
    ├── baseSection.html
    ├── generic.html
    └── home.html
  • layouts/_default/index.html:
{{ define "main" }}
  <div class="container-fluid no-padding">
    {{ range $index, $element := .Site.RegularPages }}
      <!-- Dynamically determine the partial to include based on the content type -->
      {{ $partialName := printf "partials/%s.html" .Type }}
      <!-- Include the base section and specify the content block via the partial -->
      {{ partial "baseSection.html" (dict "context" . "contentPartial" $partialName) }}
    {{ end }}
  </div>
{{ end }}
  • layouts/partials/baseSection.html:
<section
  id="{{ .context.Title | urlize }}"
  class="section py-5 {{ .bgClass }}"
>
  Debug Info: {{ .contentPartial }} - {{ .context.Type }}
  {{ block "content" .context }}
    {{ partial .contentPartial . }}
  {{ end }}
</section>
  • layouts/partials/home.html:
{{ define "content" }}
  <div id="home" class="full-screen py-5">
    <div class="container">
      <h1>{{ .Title }}</h1>
      <p>{{ .Content }}</p>
    </div>
  </div>
{{ end }}
  • layouts/partials/generic.html:
{{ define "content" }}
  <div id="generic" class="py-5">
    <div class="container">
      <h1>{{ .Title }}</h1>
      <p>{{ .Content }}</p>
    </div>
  </div>
{{ end }}
  • content/homeSection.md:
---
title: "Home section"
type: "home"
weight: 1
---
Home section text
  • content/genericSection.md:
---
title: Generic section
type: "generic"
weight: 2
---
Generic section text

What puzzles me is that when the generic section is displayed, the debug line (defined at line 7 in baseSection.html) is properly displayed as “Debug Info: partials/generic.html - generic”.
But nonetheless, the <section id="generic-section"> contains a <div id="home">

If anyone has an idea about what’s going on here I would be really grateful to hear it! :pray: :slightly_smiling_face:

2

Investigating further, I found out that I could solve the problem by removing the “content” block logic:

  • layouts/partials/baseSection.html:
<section
  id="{{ .context.Title | urlize }}"
  class="section py-5 {{ .bgClass }}"
>
  Debug Info: {{ .contentPartial }} - {{ .context.Type }}
  {{ partial .contentPartial .context }}
</section>
  • layout/partials/home.html:
<div id="home" class="full-screen py-5">
  <div class="container">
    <h1>{{ .Title }}</h1>
    <p>{{ .Content }}</p>
 </div>
</div>
  • layout/partials/generic.html:
<div id="generic" class="py-5">
  <div class="container">
    <h1>{{ .Title }}</h1>
    <p>{{ .Content }}</p>
  </div>
</div>

Although I am happy to have found out a solution, I still can’t figure out why the “content” block logic made Hugo unable to pick the proper partial. Does anyone have a clue?

Thanks!

3

https://github.com/gohugoio/hugo/issues/7936

4

Thanks a lot @jmooring, so it wasn’t a mistake I made :slightly_smiling_face: