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.
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
[[module.imports]] path = "github.com/gethinode/hinode"
The main repository of Hinode imports the following modules by default.
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.
Hugo uses two different algorithms to merge the filesystems, depending on the file type:
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:
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. Omit the
mod- prefix of the module’s name.
|optional||[“leaflet”]||Optional modules to be included by Hinode. Enable each module in the frontmatter of a page.|
|disableTemplate||[“katex”]||Scripts file within optional modules to exclude from processing as Hugo template. The scripts are bundled as-is instead.|
fontawesome module supports the following additional settings:
|fontawesome.inline||true||If set, uses inline vector images instead of web fonts. Both methods support Font Awesome styling and animation. However, when using vector images you cannot use aliases. Instead, use the default name of the icon.|
|fontawesome.debug||true||If set, prints the original code |
|fontawesome.skipMissing||false||If set, displays a warning when an icon cannot be found. The missing icon is replaced with a dummy. By default, Hinode exits with an error when an icon is missing.|
Hinode uses the following module configuration by default:
You can enable an optional module for a specific page by setting the following value in the page’s frontmatter:
--- modules: ["leaflet"] ---