Mysterious problem with nested (inline) partials

Context: I’m continuing on my quest to make a Theme Component that provides the basic scaffolding for new projects (to reduce repetition) and that allows for great extendability. I built one prototype based on blocks but had to abandon that approach as it did not allow overriding blocks from the Child Theme.

The problem: I have now refactored the code to use only partials (mostly inlined) which allows me to override any part of the Theme Component from the Child Theme on a granular level. But somehow the content from one of the partials is not displayed – or rather it is shown sometimes, which is even more frustrating!

Debug: If anyone wants to follow along and replicate this error on their own computer, you can do a git clone --recurse-submodules https://git.sr.ht/~rsolvang/cloudless-hugo-theme-demo && cd cloudless-hugo-theme-demo && hugo serve and open the demo at localhost:1313 (if you have hugo installed on your system).

You will se an empty shell of the site, but it should actually show lorem ipsum text from content/index.md. But there is a way to display the text:

  • Open themes/cloudless/layouts/_default/baseof.html, go to line 118 ({{ partial "main/article" . -}}), delete it and save the file.
  • Undo the deletion of line 118 and save the file again.
  • The content is showing!
  • Make some other changes and save the file and the content disappears again.

Why? What is going on here? Have I (ab)used inline partials wrong somehow? Does this error happen only on my machine or can it be replicated on other systems?

I would be happy if someone could check out this phenomenon and hopefully get closer to find the cause of this behavior.

Nope, it’s not mysterious :wink: Hugo does, what you tell it to do:

The homepage layout (1) defines only the site title (2).

There seems to be a

{{ define "partials/main/article" }}
the content
{{ end }}

missing.

Sometimes it works, sometimes not, might be, that subpages work, because the layouts in _default have more sections defined.

And I have no idea and not the organisational mental capacity to understand what’s going on in baseof.html. But there seems to be no default content for when there is nothing defined.

Thanks for taking the time to check it out and providing your input @davidsneighbour, I had stared at the code for to long last night so the error is probably caused by mistakes I made.

It seems that one mistake I made was to not wrap my partials in blocks in basehtml.html. Also, I should have realized that the partial in index.html does not behave the same way as a blocks do. I’ll get back to coding tonight, staring at the code 'til it works!

  • A block/define pair is not related to partials
  • Inline partials will most of the situations be defined in the same file as they’re used

I think I found a clue to what goes wrong, and it seems I have misunderstood how partials work and can be used.

In baseof.html I have defined an inline partial (partials/main/article). I assumed that when I defined that same partial from single.html og section.html, the content of that partial would be overwritten, but it seems like the partial defined in baseof.html takes precedence and cannot be overwritten…?

I’m trying to achieve two things here, but am probably doing it wrong:

  • Make it possible to “inject” code above and below certain sections of the site from a parent theme, i.e. above and below the header and main parts of the site.
  • Redefine certain parts of the baseof without using blocks, as the block solution had some limitations when building a Theme Component.

Suggestions on how to achieve these goals are most welcome!

EDIT: I have made some changes to the repo (simplified the baseof.html by moving some partials to actual files).

I returned to using blocks for now, hoping I can figuring out a sensible way to achieve what I want with Theme Components.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.