Modules

Customize and extend Hinode with Hugo modules.

Hinode supports Hugo Modules  to provide a flexible and extensible modular framework. By default, Hinode includes core building blocks for Bootstrap  , FlexSearch  , and Font Awesome  . The following paragraphs explain how to customize the module configuration.

Importing Modules  

By default, the Hinode template imports Hinode as module itself. In this approach, the modules that Hinode includes are imported as transitive modules. Adjust the module section in your site’s configuration file config/_default/hugo.toml to import or adjust the required modules. Visit the Hugo documentation to Review All Available Configuration Settings  . You can Disable Individual Modules  by setting disable to true.

  [[module.imports]]
    path = "github.com/gethinode/hinode"

The main repository of Hinode imports the following modules by default.

• config/_default/hugo.toml

  [[module.imports]]
    path = "github.com/gethinode/mod-bootstrap"
  [[module.imports]]
    path = "github.com/gethinode/mod-csp"
  [[module.imports]]
    path = "github.com/gethinode/mod-flexsearch/v2"
  [[module.imports]]
    path = "github.com/gethinode/mod-fontawesome"
  [[module.imports]]
    path = "github.com/gethinode/mod-google-analytics"
  [[module.imports]]
    path = "github.com/gethinode/mod-katex"
  [[module.imports]]
    path = "github.com/gethinode/mod-leaflet"
  [[module.imports]]
    path = "github.com/gethinode/mod-lottie"
  [[module.imports]]
    path = "github.com/gethinode/mod-simple-datatables"
  [[module.imports]]
    path = "github.com/gethinode/mod-utils/v2"

Configuring Modules  

  Note

Hinode uses the default configuration defined in each referenced module since release v0.24.0  . You can override these settings in your site parameters.

You can choose to either fully integrate compatible modules or to include them on a page-by-page basis. For example, you might only want to display an interactive map on a few pages. In this case, you could choose to include the leaflet module on an opt-in basis. This ensures the page size is minimized. On the other hand, as bootstrap is used on every single page, it makes sense to include it as a core module.

For core modules, Hinode bundles the provided Stylesheet Files and JavaScript Files into the main stylesheet and core script bundles. For optional modules, Hinode prepares separate stylesheet files and JavaScript files for each individual module. The configuration order of the core modules is important: the first module is processed before the next modules.

  Note

Hugo uses two different algorithms to merge the filesystems, depending on the file type:

• For i18n and data files, Hugo merges deeply using the translation ID and data key inside the files.
• For static, layouts (templates), and archetypes files, these are merged on file level, so the left-most file will be chosen.

Adjust the modules section in your site’s parameter configuration file config/_default/params.toml to configure the various modules. Modules can include files for each of the following folders: archetypes, assets, content, data, i18n, layouts, static. Modules can also have their own configuration files. Each module needs to be imported as well ( See the Previous Paragraph).

The following table provides an overview of the available settings for each module. Omit the mod- prefix of the module’s name.

For example, Bootstrap uses the following configuration in its module configuration:

[params.modules.bootstrap]
  integration = "core"
  excludeSCSS = true

Configuring Module-Specific Extensions  

Several modules support additional, module-specific configurations. Review them in the next paragraphs.

Clarity  

  Warning

This module assumes you have properly configured a Cookie Consent Manager. The Clarity script is assigned to the category analytics. Cookie consent is automatically given when this script is loaded. Do not load this script without explicit consent from the user. See the Hinode Docs for more details.

This module supports the following parameters (see the section params.modules in config.toml):

CookieYes  

The cookieyes module requires the following settings:

Font Awesome  

The fontawesome module supports the following additional settings:

Google Analytics  

  Note

By convention, Hinode uses kebab case as naming convention for module names. However, the module name in the site parameters is renamed to GoogleAnalytics to align with Hugo’s privacy settings.

Set you G-tag in your site configuration (usually hugo.toml) in the following section:

[services]
  [services.googleAnalytics]
    ID = "G-xxxxxxxxxx"

You can modify the privacy configuration in the following section:

[privacy]
  [privacy.googleAnalytics]
    disable = false
    respectDoNotTrack = false

The google-analytics module supports the following additional settings:

Utils  

The utils module supports the following additional settings:

Enabling Optional Modules  

You can enable an optional module for a specific page by setting the following value in the page’s frontmatter:

---
modules: ["leaflet"]
---