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.

Choose the Right Hook

• HugoPress built-in hooks.
• Header’s hooks.
• Footer’s hooks.
• Blog’s hooks.
• Docs’s hooks.
• You can find more on our documentation.

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

Configuration

And then configure the hook.

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

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

 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.

Create Partial

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

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.