Custom javascript as partial in baseof working only for homepage

support
1

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.

2

No.

An _index.md file will use a list template, not a single template. If you want “research” to be a page instead of a section:

mv content/research/_index.md content/research/index.md

See https://gohugo.io/content-management/page-bundles.

If you need additional assistance, please post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

3

Yes, you’re right and thanks! However, that wasn’t exactly the thing that caused the problem, since I had only one baseof. The Javascript file must have a forward slash when imported in custom-headers.html, i.e., <script src="/js/load-before.js"></script>. This might apply to other files/resources elsewhere in the directory structure if imported around block "main" in baseof.html.

I’ll educate myself more about the layouts/contents but I now better understand the difference you’ve described.