Use particles.js on sub pages (about, gallery)

Loving the theme. I'm very much a noob with HTML/CSS and slowly getting the hang of hugo. I have a main page (not with hugo) that uses particles.js and links to the site I'm building, and I'd like to carry the particles.js into this theme.

I got it working for the main galleries page up a container behind the main content in baseof.html and dropping in the particles.js dif. Works great. But, for one reason or another, it doesn't show up on any of the sub pages. I can see it in the source code still, but it's not rendering. I've tried referencing particles.js and app.js up a parent level, but still no dice. Right now I have those files sitting in static in the main project, which I believe is referenced by just /file.ext. It could be that I need some relative link instead?

I've also tried to put the div into gallery.html / single.html with similar (non)results. Any idea on what's going on?

Edit: I've also built the site and put it into the expected file structure with hard-links to the main js file (/resources/scripts/music-particles.js) which works for the main page still, but not the sub pages. I can't figure out what's causing the sub pages to ignore it. I also ran into this when trying to add different content if there was only 1 image in the gallery (image on left, text on right... could never get the flexbox centered)

Built sub page:

My baseof.html:

<!doctype html>
{{- $theme := .Params.theme | default .Site.Params.defaultTheme }}
<html class='{{- if (eq $theme "light") -}}light{{- else if (eq $theme "dark") }}dark{{ end }}" lang="{{- site.LanguageCode | default "en" -}}'>
  {{ partial "head.html" . }}
  <body>
    {{ block "header" . }}{{ partial "header.html" . }}{{ end }}
    <main>
      <div class="particles-container" id="particles-js"></div>
      <script src="/particles.js"></script>
      <script src="/app.js"></script>
      {{ block "main" . }}{{ end }}
    </main>
    {{ block "footer" . }}{{ partialCached "footer.html" . }}{{ end }}

  </body>
</html>

Related css:

.particles-container {
  position: absolute;
  height: 90%;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#particles-js {
  display: flex;
  align-items: center;
  text-align: center;
  position: absolute;
  width: 100%;
  z-index: -1;
  opacity: 0.2;
}

I do not really understand what you are trying to achieve with hard-links (you should never modify the resources directory created by Hugo). Here are some thoughts on how you could integrate particles.js:

Copy particles.js from the GitHub repository to assets/js/particles.js.

Add the CSS to your site's assets/css/custom.css:

.particles-container {
  position: absolute;
  height: 90%;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#particles-js {
  display: flex;
  align-items: center;
  text-align: center;
  position: absolute;
  width: 100%;
  z-index: -1;
  opacity: 0.2;
}

Add layouts/_default/baseof.html (which overrides the theme's template) and include the <div>:

<!doctype html>
{{- $theme := .Params.theme | default .Site.Params.defaultTheme }}
<html class="{{- if (eq $theme "light") -}}light{{- else if (eq $theme "dark") }}dark{{ end }}" lang="{{- site.LanguageCode | default "en" -}}">
  {{ partial "head.html" . }}
  <body>
    {{ block "header" . }}{{ partial "header.html" . }}{{ end }}
    <main>
      <div class="particles-container" id="particles-js"></div>
      {{ block "main" . }}{{ end }}
    </main>
    {{ block "footer" . }}{{ partialCached "footer.html" . }}{{ end }}
  </body>
</html>

Add layouts/partials/head-custom.html

{{ $particlesJS := resources.Get "js/particles.js" | js.Build (dict "minify" true) | resources.Fingerprint }}
<script src="{{ $particlesJS.RelPermalink }}"></script>
<script>
  particlesJS.load("particles-js", "/particles.json", function () {});
</script>

Add your particles.json as static/particles.json.

nicokaiser / hugo-theme-gallery

Use particles.js on sub pages (about, gallery) #74