Including particles.js?

[BCHarrell]

Good evening. Thanks for your work on the theme, I found it very easy to modify for the most part.

I'm building a site that consists of an index.html at / that I built by hand, and then two Hugo sites with different themes for the different sections (security, and music). I have the music side built with a different theme, just working on the security side now with this theme.

The root page of the website (not the Hugo site) uses particles.js and I'd like to carry it down into the sub pages. I was able to get it to work for some of the /music side (the first index loads, but I can't get the sub pages like /music/foo to work there either...), but I haven't been able to get it to work with this theme. I've tried putting the div into different elements in baseof.html and single.html as well as the "extra-foot.html". The most I've been able to get was the div knocking all the content lower down the page despite being "absolute", and the particles canvas is seemingly loaded in the page. Not sure if it's a CSS vs SASS issue (it shouldn't be... but I'm a web noob so maybe.)

Some example code:

.particles-container {
  position: absolute;
  height: 100%;
  width: 100%;
}

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

And I tried this in different places / in the "extra-foot.html" with no luck (/resources/scripts/xyz.js is off of the root domain after building the site. I've also tried using rel links in Hugo with the static folder):

<div class="particles-container" id="particles-js"></div>
<script src="/resources/scripts/particles.js"></script>
<script src="/resources/scripts/music-particles.js"></script>

Any ideas on how I can get this loaded?

[BCHarrell]

Resolved the issue.

[1bl4z3r]

Hi @BCHarrell,

Sorry for not able to respond to you quicker.
If possible could you please elucidate what steps you've taken to implement particles.js in your project. I think I should add that to README

[BCHarrell]

No worries!

Part of it was my own issue - the particles.js I was using had an image for the nodes, instead of a built-in shape. The image file was getting referenced locally everywhere the script was loaded, I needed to update it to a hard-coded path to get that to display. So that fixed part of the display issue.

I ended up putting the div in the following section which gives me the desired effect of full-page on the home screen, and slowly fades off on long articles.

baseof.html

...
{{- if .Site.Params.googleTagManager -}}{{- partial "googleTagManager_body.html" . -}}{{- end -}}
<div class="particles-container" id="particles-js"></div>
<script src="/resources/scripts/particles.js"></script>
<script src="/resources/scripts/bits-particles.js"></script>
{{- block "header" . -}}{{ end -}}

style.scss

.particles-container {
  position: absolute !important;
  top: 0;
  height: 100%;
  width: 100%;
}

#particles-js {
  display: flex;
  position: absolute !important;
  width: 100%;
  z-index: -1;
  opacity: 0.2;
}

[1bl4z3r]

That looks sick... I gotta try on mine too