Hey, I am new to Hugo and haven’t found a solution to my problem, might be quite concrete. I am using parts of the Hugo universal theme. TL;DR: A Javascript script, imported in the custom headers, loaded as a partial to the baseof layout, does not work for other pages than the homepage.
My site structure:
├── archetypes
├── config.yaml
├── content
│ └── _index.md
│ └── research
│ └── _index.md
├── data
├── layouts
│ ├── _default
│ │ ├── baseof.html
│ │ ├── single.html (overridden, is empty)
│ │ └── list.html (overridden somewhere else, is empty)
│ ├── research
│ │ └── single.html
│ └── partials
│ ├── headers.html
│ ├── custom_headers.html
│ ├── top.html
│ ├── nav.html
│ ├── footer.html
│ └── scripts.html
│
├── public
├── static
├── css
│ └── custom.css
└── js
└── load-before.js
└── themes
└── hugo-universal-theme
└── ...
The structure of baseof.html looks similar to the following, utilizing one main block. Other parts are imported from partials, including headers (had been in layout, haven’t changed) and custom_headers (where the user is supposed to put their custom stylings and scripts).
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
{{ partial "headers.html" . }}
{{ partial "custom_headers.html" . }}
</head>
<body>
<div id="all" class="allHidden">
{{ partial "top.html" . }}
{{ partial "nav.html" . }}
{{ block "main" . }} {{ end }}
{{ partial "footer.html" . }}
</div>
{{ partial "scripts.html" . }}
</body>
</html>
My script load-before.js is imported from within custom_headers.html. Its only functionality is to make everything in <div id=all class=allHidden> visible after the DOM is loaded, such that it assigns class allShown, while custom.css takes care of an opacity animation.
Weirdly, this script only works for the homepage, aka content/_index.md, thus index.html layout. index.html looks like this:
{{ define "main" }}
<!-- some components of the homepage -->
{{ partial "carousel.html" . }}
{{ partial "features.html" . }}
{{ partial "testimonials.html" . }}
{{ partial "partners.html" . }}
{{ end }}
When I “click” to load research page in the nav (content/research/_index.md and thus layouts/research/single.html), the script does nothing (div id=all does not show up, the page is basically blank), while I can still see it loaded in research page headers in the developer console.
research/single.html looks like this:
{{ define "main" }}
<div id="content">
<div class="container">
<div class="row">
<h1>This is a research page</h1>
</div>
</div>
</div>
{{ end }}
I’ll gladly provide other info if needed. I’d read about how everything outside block can break my code but I’ve also seen people using partials around it in the baseof layout. Maybe I am missing something underlying in Hugo principles.