diff options
Diffstat (limited to 'docs/content/en/render-hooks')
-rwxr-xr-x | docs/content/en/render-hooks/blockquotes.md | 171 | ||||
-rwxr-xr-x | docs/content/en/render-hooks/code-blocks.md | 4 | ||||
-rwxr-xr-x | docs/content/en/render-hooks/headings.md | 8 | ||||
-rwxr-xr-x | docs/content/en/render-hooks/images.md | 8 | ||||
-rwxr-xr-x | docs/content/en/render-hooks/introduction.md | 3 | ||||
-rwxr-xr-x | docs/content/en/render-hooks/links.md | 4 | ||||
-rwxr-xr-x | docs/content/en/render-hooks/passthrough.md | 125 |
7 files changed, 313 insertions, 10 deletions
diff --git a/docs/content/en/render-hooks/blockquotes.md b/docs/content/en/render-hooks/blockquotes.md new file mode 100755 index 000000000..e0eda5c51 --- /dev/null +++ b/docs/content/en/render-hooks/blockquotes.md @@ -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 +``` diff --git a/docs/content/en/render-hooks/code-blocks.md b/docs/content/en/render-hooks/code-blocks.md index 0c11c7864..d322cb88d 100755 --- a/docs/content/en/render-hooks/code-blocks.md +++ b/docs/content/en/render-hooks/code-blocks.md @@ -7,8 +7,8 @@ keywords: [] menu: docs: parent: render-hooks - weight: 30 -weight: 30 + weight: 40 +weight: 40 toc: true --- diff --git a/docs/content/en/render-hooks/headings.md b/docs/content/en/render-hooks/headings.md index c48bb11e1..8ae3b808a 100755 --- a/docs/content/en/render-hooks/headings.md +++ b/docs/content/en/render-hooks/headings.md @@ -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] diff --git a/docs/content/en/render-hooks/images.md b/docs/content/en/render-hooks/images.md index 2d9b5e2e5..1638ceeae 100755 --- a/docs/content/en/render-hooks/images.md +++ b/docs/content/en/render-hooks/images.md @@ -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] diff --git a/docs/content/en/render-hooks/introduction.md b/docs/content/en/render-hooks/introduction.md index 8268b2ec7..3745fc398 100755 --- a/docs/content/en/render-hooks/introduction.md +++ b/docs/content/en/render-hooks/introduction.md @@ -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 diff --git a/docs/content/en/render-hooks/links.md b/docs/content/en/render-hooks/links.md index bf0485068..79c3d6926 100755 --- a/docs/content/en/render-hooks/links.md +++ b/docs/content/en/render-hooks/links.md @@ -7,8 +7,8 @@ keywords: [] menu: docs: parent: render-hooks - weight: 60 -weight: 60 + weight: 70 +weight: 70 toc: true --- diff --git a/docs/content/en/render-hooks/passthrough.md b/docs/content/en/render-hooks/passthrough.md new file mode 100755 index 000000000..3b82116e6 --- /dev/null +++ b/docs/content/en/render-hooks/passthrough.md @@ -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" %}} |