hugo/content/en/render-hooks/blockquotes.md

title	linkTitle	description	categories	keywords	menu	weight	toc
Blockquote render hooks	Blockquotes	Create a blockquote render hook to override the rendering of Markdown blockquotes to HTML.	render hooks		docs parent weight render-hooks 30	30	true

{{< new-in 0.132.0 >}}

Context

Blockquote render hook templates receive the following context:

AlertType

(string) Applicable when Type is alert, this is the alert type converted to lowercase. See the alerts section below.

Attributes

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

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

Ordinal

(int) The zero-based ordinal of the blockquote on the page.

Page

(page) A reference to the current page.

PageInner

(page) A reference to a page nested via the RenderShortcodes method.

Position

(string) The position of the blockquote within the page content.

Text

(string) The blockquote text, excluding the alert designator if present. See the alerts section below.

Type

(bool) The blockquote type. Returns alert if the blockquote has an alert designator, else regular. See the alerts section below.

Examples

In its default configuration, Hugo renders Markdown blockquotes according to the CommonMark specification. To create a render hook that does the same thing:

{{< code file=layouts/_default/_markup/render-blockquote.html copy=true >}}

{{ .Text | safeHTML }}

{{< /code >}}

To render a blockquote as an HTML figure element with an optional citation and caption:

{{< code file=layouts/_default/_markup/render-blockquote.html copy=true >}}

{{ .Text | safeHTML }}

{{ with .Attributes.caption }}

{{ . | safeHTML }}

{{ end }}

{{< /code >}}

Then in your markdown:

> Some text
{cite="https://gohugo.io" caption="Some caption"}

Alerts

Also known as callouts or admonitions, alerts are blockquotes used to emphasize critical information. For example:

{{< code file=content/example.md lang=text >}}

Note

Useful information that users should know, even when skimming content.

Tip

Helpful advice for doing things better or more easily.

Important

Key information users need to know to achieve their goal.

Warning

Urgent info that needs immediate user attention to avoid problems.

Caution

Advises about risks or negative outcomes of certain actions. {{< /code >}}

{{% note %}} This syntax is compatible with the GitHub Alert Markdown extension. {{% /note %}}

The first line of each alert is an alert designator consisting of an exclamation point followed by the alert type, wrapped within brackets.

The blockquote render hook below renders a multilingual alert if an alert desginator is present, otherwise it renders a blockquote according to the CommonMark specification.

{{< code file=layouts/_default/_markup/render-blockquote.html copy=true >}} {{ $emojis := dict "caution" "❗" "important" "ℹ️" "note" "ℹ️" "tip" "💡" "warning" "ℹ️" }}

{{ if eq .Type "alert" }}

{{ transform.Emojify (index $emojis .AlertType) }} {{ or (i18n .AlertType) (title .AlertType) }}

{{ .Text | safeHTML }}

{{ else }}

{{ .Text | safeHTML }}

{{ end }} {{< /code >}}

To override the label, create these entries in your i18n files:

{{< code-toggle file=i18n/en.toml >}} caution = 'Caution' important = 'Important' note = 'Note' tip = 'Tip' warning = 'Warning' {{< /code-toggle >}}

Although you can use one template with conditional logic as shown above, you can also create separate templates for each Type of blockquote:

layouts/
└── _default/
    └── _markup/
        ├── render-blockquote-alert.html
        └── render-blockquote-regular.html