Add Custom HTML Markup

You may want to include custom HTML markup to extend functionalities, that’s quit easy to do that with HugoPress built-in hooks and HB custom hooks.

Let’s get started with a simple example, which displays a greeting message on the top of page.

example

Choose the Right Hook

In this example, the body-begin hook is the hook we’re looking for.

Configuration

And then configure the hook.

params.toml

1[hugopress]
2  [hugopress.modules]
3    [hugopress.modules.hb-custom]
4      [hugopress.modules.hb-custom.hooks]
5        [hugopress.modules.hb-custom.hooks.body-begin]
6          cacheable = true

params.yaml

1hugopress:
2  modules:
3    hb-custom:
4      hooks:
5        body-begin:
6          cacheable: true

params.json

 1{
 2   "hugopress": {
 3      "modules": {
 4         "hb-custom": {
 5            "hooks": {
 6               "body-begin": {
 7                  "cacheable": true
 8               }
 9            }
10         }
11      }
12   }
13}

If everything is OK, Hugo’ll complaint about partial not found.

cacheable
Since the example HTML markup doesn’t contains dynamic content, mark it as cacheable to improve build performance.

Create Partial

It’s time to create the partial for including custom HTML. The partial name is related to the module and hook name.

layouts/partials/hugopress/modules/hb-custom/hooks/body-begin.html
1<p class="text-center bg-danger text-white mb-0">
2  Greeting from the body-begin hook.
3</p>

You’re able to access Page variables via .Page, please don’t forgot disabling the cacheable for dynamic data. See also Hooks Context.

That’s it, now the greeting message will appear at the top of page.

razonyang
Monday, July 15, 2024 Sunday, April 16, 2023