Merge commit '5be51ac3db225d5df501ed1fa1499c41d97dbf65'

This commit is contained in:
Bjørn Erik Pedersen
2025-04-10 13:04:51 +02:00
987 changed files with 12379 additions and 14083 deletions

View File

@@ -2,78 +2,63 @@
title: Heading render hooks
linkTitle: Headings
description: Create a heading render hook to override the rendering of Markdown headings to HTML.
categories: [render hooks]
categories: []
keywords: []
menu:
docs:
parent: render-hooks
weight: 50
weight: 50
toc: true
---
## Context
Heading render hook templates receive the following [context](g):
###### Anchor
Anchor
: (`string`) The `id` attribute of the heading element.
(`string`) The `id` attribute of the heading element.
Attributes
: (`map`) The [Markdown attributes], available if you configure your site as follows:
###### Attributes
{{< code-toggle file=hugo >}}
[markup.goldmark.parser.attribute]
title = true
{{< /code-toggle >}}
(`map`) The [Markdown attributes], available if you configure your site as follows:
Level
: (`int`) The heading level, 1 through 6.
Page
: (`page`) A reference to the current page.
PageInner
: {{< new-in 0.125.0 />}}
: (`page`) A reference to a page nested via the [`RenderShortcodes`] method. [See details](#pageinner-details).
PlainText
: (`string`) The heading text as plain text.
Text
: (`template.HTML`) The heading text.
[Markdown attributes]: /content-management/markdown-attributes/
{{< 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
{{< new-in 0.125.0 />}}
(`page`) A reference to a page nested via the [`RenderShortcodes`] method. [See details](#pageinner-details).
[`RenderShortcodes`]: /methods/page/rendershortcodes
###### 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:
[CommonMark specification]: https://spec.commonmark.org/current/
{{< code file=layouts/_default/_markup/render-heading.html copy=true >}}
```go-html-template {file="layouts/_default/_markup/render-heading.html" copy=true}
<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
{{- .Text -}}
</h{{ .Level }}>
{{< /code >}}
```
To add an anchor link to the right of each heading:
{{< code file=layouts/_default/_markup/render-heading.html copy=true >}}
```go-html-template {file="layouts/_default/_markup/render-heading.html" copy=true}
<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
{{ .Text }}
<a href="#{{ .Anchor }}">#</a>
</h{{ .Level }}>
{{< /code >}}
```
{{% include "/render-hooks/_common/pageinner.md" %}}
{{% include "/_common/render-hooks/pageinner.md" %}}