mirror of
https://github.com/gohugoio/hugo.git
synced 2025-08-17 21:01:26 +02:00
Merge commit 'dec8cd4ada29218971743333f8ac662a9c06aad8'
This commit is contained in:
171
docs/content/en/render-hooks/blockquotes.md
Executable file
171
docs/content/en/render-hooks/blockquotes.md
Executable file
@@ -0,0 +1,171 @@
|
||||
---
|
||||
title: Blockquote render hooks
|
||||
linkTitle: Blockquotes
|
||||
description: Create a blockquote render hook to override the rendering of Markdown blockquotes to HTML.
|
||||
categories: [render hooks]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: render-hooks
|
||||
weight: 30
|
||||
weight: 30
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{< new-in 0.132.0 >}}
|
||||
|
||||
## Context
|
||||
|
||||
Blockquote render hook templates receive the following [context]:
|
||||
|
||||
[context]: /getting-started/glossary/#context
|
||||
|
||||
###### AlertType
|
||||
|
||||
(`string`) Applicable when [`Type`](#type) is `alert`, this is the alert type converted to lowercase. See the [alerts](#alerts) section below.
|
||||
|
||||
###### Attributes
|
||||
|
||||
(`map`) The [Markdown attributes], available if you configure your site as follows:
|
||||
|
||||
[Markdown attributes]: /content-management/markdown-attributes/
|
||||
|
||||
{{< 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.
|
||||
|
||||
[`RenderShortcodes`]: /methods/page/rendershortcodes
|
||||
|
||||
###### 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](#alerts) section below.
|
||||
|
||||
###### Type
|
||||
|
||||
(`bool`) The blockquote type. Returns `alert` if the blockquote has an alert designator, else `regular`. See the [alerts](#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:
|
||||
|
||||
[CommonMark specification]: https://spec.commonmark.org/current/
|
||||
|
||||
{{< code file=layouts/_default/_markup/render-blockquote.html copy=true >}}
|
||||
<blockquote>
|
||||
{{ .Text | safeHTML }}
|
||||
</blockquote>
|
||||
{{< /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 >}}
|
||||
<figure>
|
||||
<blockquote {{ with .Attributes.cite }}cite="{{ . }}"{{ end }}>
|
||||
{{ .Text | safeHTML }}
|
||||
</blockquote>
|
||||
{{ with .Attributes.caption }}
|
||||
<figcaption class="blockquote-caption">
|
||||
{{ . | safeHTML }}
|
||||
</figcaption>
|
||||
{{ end }}
|
||||
</figure>
|
||||
{{< /code >}}
|
||||
|
||||
Then in your markdown:
|
||||
|
||||
```text
|
||||
> 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" ":exclamation:"
|
||||
"important" ":information_source:"
|
||||
"note" ":information_source:"
|
||||
"tip" ":bulb:"
|
||||
"warning" ":information_source:"
|
||||
}}
|
||||
|
||||
{{ if eq .Type "alert" }}
|
||||
<blockquote class="alert alert-{{ .AlertType }}">
|
||||
<p class="alert-heading">
|
||||
{{ transform.Emojify (index $emojis .AlertType) }}
|
||||
{{ or (i18n .AlertType) (title .AlertType) }}
|
||||
</p>
|
||||
{{ .Text | safeHTML }}
|
||||
</blockquote>
|
||||
{{ else }}
|
||||
<blockquote>
|
||||
{{ .Text | safeHTML }}
|
||||
</blockquote>
|
||||
{{ 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`](#type) of blockquote:
|
||||
|
||||
```text
|
||||
layouts/
|
||||
└── _default/
|
||||
└── _markup/
|
||||
├── render-blockquote-alert.html
|
||||
└── render-blockquote-regular.html
|
||||
```
|
@@ -7,8 +7,8 @@ keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: render-hooks
|
||||
weight: 30
|
||||
weight: 30
|
||||
weight: 40
|
||||
weight: 40
|
||||
toc: true
|
||||
---
|
||||
|
||||
|
@@ -7,8 +7,8 @@ keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: render-hooks
|
||||
weight: 40
|
||||
weight: 40
|
||||
weight: 50
|
||||
weight: 50
|
||||
toc: true
|
||||
---
|
||||
|
||||
@@ -24,7 +24,9 @@ Heading render hook templates receive the following [context]:
|
||||
|
||||
###### Attributes
|
||||
|
||||
(`map`) The Markdown attributes, available if you configure your site as follows:
|
||||
(`map`) The [Markdown attributes], available if you configure your site as follows:
|
||||
|
||||
[Markdown attributes]: /content-management/markdown-attributes/
|
||||
|
||||
{{< code-toggle file=hugo >}}
|
||||
[markup.goldmark.parser.attribute]
|
||||
|
@@ -7,8 +7,8 @@ keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: render-hooks
|
||||
weight: 50
|
||||
weight: 50
|
||||
weight: 60
|
||||
weight: 60
|
||||
toc: true
|
||||
---
|
||||
|
||||
@@ -32,7 +32,9 @@ Image render hook templates receive the following context:
|
||||
|
||||
###### Attributes
|
||||
|
||||
(`map`) The Markdown attributes, available if you configure your site as follows:
|
||||
(`map`) The [Markdown attributes], available if you configure your site as follows:
|
||||
|
||||
[Markdown attributes]: /content-management/markdown-attributes/
|
||||
|
||||
{{< code-toggle file=hugo >}}
|
||||
[markup.goldmark.parser]
|
||||
|
@@ -13,10 +13,12 @@ weight: 20
|
||||
|
||||
When rendering Markdown to HTML, render hooks override the conversion. Each render hook is a template, with one template for each supported element type:
|
||||
|
||||
- [Blockquotes](/render-hooks/blockquotes)
|
||||
- [Code blocks](/render-hooks/code-blocks)
|
||||
- [Headings](/render-hooks/headings)
|
||||
- [Images](/render-hooks/images)
|
||||
- [Links](/render-hooks/links)
|
||||
- [Passthrough elements](/render-hooks/passthrough)
|
||||
|
||||
{{% note %}}
|
||||
Hugo supports multiple [content formats] including Markdown, HTML, AsciiDoc, Emacs Org Mode, Pandoc, and reStructuredText.
|
||||
@@ -54,6 +56,7 @@ Each render hook is a template, with one template for each supported element typ
|
||||
layouts/
|
||||
└── _default/
|
||||
└── _markup/
|
||||
├── render-blockquote.html
|
||||
├── render-codeblock.html
|
||||
├── render-heading.html
|
||||
├── render-image.html
|
||||
|
@@ -7,8 +7,8 @@ keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: render-hooks
|
||||
weight: 60
|
||||
weight: 60
|
||||
weight: 70
|
||||
weight: 70
|
||||
toc: true
|
||||
---
|
||||
|
||||
|
125
docs/content/en/render-hooks/passthrough.md
Executable file
125
docs/content/en/render-hooks/passthrough.md
Executable file
@@ -0,0 +1,125 @@
|
||||
---
|
||||
title: Passthrough render hooks
|
||||
linkTitle: Passthrough
|
||||
description: Create a passthrough render hook to override the rendering of text snippets captured by the Goldmark passthrough extension.
|
||||
categories: [render hooks]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: render-hooks
|
||||
weight: 80
|
||||
weight: 80
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{< new-in 0.132.0 >}}
|
||||
|
||||
## Overview
|
||||
|
||||
Hugo uses [Goldmark] to render Markdown to HTML. Goldmark supports custom extensions to extend its core functionality. The Goldmark [passthrough extension] captures and preserves raw Markdown within delimited snippets of text, including the delimiters themselves. These are known as _passthrough elements_.
|
||||
|
||||
[Goldmark]: https://github.com/yuin/goldmark
|
||||
[passthrough extension]: /getting-started/configuration-markup/#passthrough
|
||||
|
||||
Depending on your choice of delimiters, Hugo will classify a passthrough element as either _block_ or _inline_. Consider this contrived example:
|
||||
|
||||
{{< code file=content/sample.md >}}
|
||||
This is a
|
||||
|
||||
\[block\]
|
||||
|
||||
passthrough element with opening and closing block delimiters.
|
||||
|
||||
This is an \(inline\) passthrough element with opening and closing inline delimiters.
|
||||
{{< /code >}}
|
||||
|
||||
Update your site configuration to enable the passthrough extension and define opening and closing delimiters for each passthrough element type, either `block` or `inline`. For example:
|
||||
|
||||
{{< code-toggle file=hugo >}}
|
||||
[markup.goldmark.extensions.passthrough]
|
||||
enable = true
|
||||
[markup.goldmark.extensions.passthrough.delimiters]
|
||||
block = [['\[', '\]'], ['$$', '$$']]
|
||||
inline = [['\(', '\)']]
|
||||
{{< /code-toggle >}}
|
||||
|
||||
In the example above there are two sets of `block` delimiters. You may use either one in your Markdown.
|
||||
|
||||
The Goldmark passthrough extension is often used in conjunction with the MathJax or KaTeX display engine to render [mathematical expressions] written in [LaTeX] or [Tex].
|
||||
|
||||
[mathematical expressions]: /content-management/mathematics/
|
||||
[LaTeX]: https://www.latex-project.org/
|
||||
[Tex]: https://en.wikipedia.org/wiki/TeX
|
||||
|
||||
To enable custom rendering of passthrough elements, create a render hook.
|
||||
|
||||
## Context
|
||||
|
||||
Passthrough render hook templates receive the following [context]:
|
||||
|
||||
[context]: /getting-started/glossary/#context
|
||||
|
||||
###### Attributes
|
||||
|
||||
(`map`) The [Markdown attributes], available if you configure your site as follows:
|
||||
|
||||
[Markdown attributes]: /content-management/markdown-attributes/
|
||||
|
||||
{{< code-toggle file=hugo >}}
|
||||
[markup.goldmark.parser.attribute]
|
||||
block = true
|
||||
{{< /code-toggle >}}
|
||||
|
||||
Hugo populates the `Attributes` map for _block_ passthrough elements. Markdown attributes are not applicable to _inline_ elements.
|
||||
|
||||
###### Inner
|
||||
(`string`) The inner content of the passthrough element, excluding the delimiters.
|
||||
|
||||
###### Ordinal
|
||||
|
||||
(`int`) The zero-based ordinal of the passthrough element on the page.
|
||||
|
||||
###### Page
|
||||
|
||||
(`page`) A reference to the current page.
|
||||
|
||||
###### PageInner
|
||||
|
||||
(`page`) A reference to a page nested via the [`RenderShortcodes`] method. [See details](#pageinner-details).
|
||||
|
||||
[`RenderShortcodes`]: /methods/page/rendershortcodes
|
||||
|
||||
###### Position
|
||||
|
||||
(`string`) The position of the passthrough element within the page content.
|
||||
|
||||
###### Type
|
||||
|
||||
(`bool`) The passthrough element type, either `block` or `inline`.
|
||||
|
||||
## Example
|
||||
|
||||
As an alternative to rendering mathematical expressions with the MathJax or KaTeX display engine, create a passthrough render hook which calls the [`transform.ToMath`] function:
|
||||
|
||||
[`transform.ToMath`]: /functions/transform/tomath/
|
||||
|
||||
{{< code file=layouts/_default/_markup/render-passthrough.html copy=true >}}
|
||||
{{ if eq .Type "block" }}
|
||||
{{ $opts := dict "displayMode" true }}
|
||||
{{ transform.ToMath .Inner $opts }}
|
||||
{{ else }}
|
||||
{{ transform.ToMath .Inner }}
|
||||
{{ end }}
|
||||
{{< /code >}}
|
||||
|
||||
Although you can use one template with conditional logic as shown above, you can also create separate templates for each [`Type`](#type) of passthrough element:
|
||||
|
||||
```text
|
||||
layouts/
|
||||
└── _default/
|
||||
└── _markup/
|
||||
├── render-passthrough-block.html
|
||||
└── render-passthrough-inline.html
|
||||
```
|
||||
|
||||
{{% include "/render-hooks/_common/pageinner.md" %}}
|
Reference in New Issue
Block a user