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.