添加自定义 HTML 标记

你可能希望包含自定义 HTML 标记,以扩展功能,这对于 HugoPress 内置钩子和 HB 自定义钩子来说小菜一碟。

让我们从一个简单的示例开始,该示例在页面顶部显示一条问候消息。

example

选择正确的钩子

本例中,body-begin 正是我们需要的钩子。

配置

然后配置钩子。

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}

如果一切正常,Hugo 将抱怨找不到模板:partial not found

cacheable

因为示例 HTML 并不包含动态内容,将其标记为 cacheable,以提升构建性能。

创建模板

紧接着创建模板以包含 HTML,模板名称和模块、钩子名称相关。

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>

你可以通过 .Page 获取页面参数,若包含动态内容,请别忘记禁用 cacheable。 详情请参阅 Hooks Context

就这样,现在问候语将出现在页面的顶部。