Heading render hooks - Hugo

Context

Heading render hook templates receive the following context:

Anchor : (string) The id attribute of the heading element.

Attributes : (map) The Markdown attributes, available if you configure your site as follows:

{{< code-toggle file=hugo >}} [markup.goldmark.parser.attribute] title = true {{< /code-toggle >}}

Level : (int) The heading level, 1 through 6.

Page : (page) A reference to the current page.

PageInner : (page) A reference to a page nested via the RenderShortcodes method. See details.

PlainText : (string) The heading text as plain text.

Text : (template.HTML) The heading text.

Examples

In its default configuration, Hugo renders Markdown headings according to the CommonMark specification with the addition of automatic id attributes. To create a render hook that does the same thing:

go-html-template

<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
  {{- .Text -}}
</h{{ .Level }}>

To add an anchor link to the right of each heading:

go-html-template

<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
  {{ .Text }}
  <a href="#{{ .Anchor }}">#</a>
</h{{ .Level }}>