Bootstrap Custom JavaScript

In my last post I showed how to embed and customise Bootstrap with a static Hugo site, now it’s the turn of the JavaScript.

It’s much simpler. We’ve already got Bootstrap installed. Lets now edit our main.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import Collapse from 'bootstrap/js/src/collapse';

// Initialize the navbar toggle
document.addEventListener('DOMContentLoaded', () => {
    const navbarToggler = document.querySelector('.navbar-toggler');
    if (navbarToggler) {
        new Collapse(document.querySelector('#navbarNav'), {
            toggle: false
          });
    }
});

console.log('This site was generated by Hugo.');

This will re-enable the Nav Bar toggle without importing the Bootstrap bundle. Find your JavaScript embed code and make it like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{{ with resources.Get "js/main.js" }}
  {{ $opts := dict
    "minify" hugo.IsProduction
    "sourceMap" (cond hugo.IsProduction "" "external")
    "targetPath" "js/main.js"
  }}
  {{ with . | js.Build $opts }}
    {{ if hugo.IsProduction }}
      {{ with . | fingerprint }}
        <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
      {{ end }}
    {{ else }}
      <script src="{{ .RelPermalink }}"></script>
    {{ end }}
  {{ end }}
{{ end }}

This will give you a minified build for production.