Javascript

Bootstrap and Vanilla JS

Overview

hugolify-theme-bootstrap layers Bootstrap JS components. Each component can be enabled or disabled individually. Some Vanilla JS are also added (Menu, Blocks…).

Enable/disable Bootstrap components

/config/_default/params.yaml

bootstrap:
  collapse: true   # default true
  dropdown: true   # default true
  modal: true      # default true
  offcanvas: true  # default true
  carousel: false  # default false
  popover: false   # default false
  scrollspy: false # default false
  tab: false       # default false
  toast: false     # default false
  tooltip: false   # default false

Enable/disable Vanilla JS components

Animation

/config/default/params.yaml

animation: false # default true, Set true to enable

Blocks

Files from enabled blocks (w/ Hugolify admin) are automatically added. The name of the javascript file is the same as the block name and must be in the blocks directory /assets/js/blocks/.

If you do not use Hugolify admin, blocks files are fallback in this file:

/assets/js/blocks/index.js

/config/default/params.yaml

carousel: true # default true, Set false to disable
Splide JS

Map (Leaflet)

/config/default/params.yaml

map: true # default true, Set false to disable

Tiles

tile: 1 # default 0, Set 1 to 11 to change tile

Parallax (Rellax)

/config/default/params.yaml

parallax:
  enable: false # default false, Set true to enable
Rellax

Vimeo API

/config/default/params.yaml

vimeo: false # default false, Set true to enable

Youtube API

/config/default/params.yaml

youtube: false # default false, Set true to enable

File override

Place a file at the same path to replace a theme JS file entirely (Hugo’s asset priority: project > theme > modules).

assets/
└── js/
    └── blocks/
        └── chart.js

Add specific files

Import your specific files in custom files.

Components

assets/
└── js/
    └── components/
        └── custom.js

To override how components are imported:

/assets/js/components/index.js

Features

assets/
└── js/
    └── features/
        └── custom.js

Vendors

assets/
└── js/
    └── vendors/
        └── custom.js