hugo/content/en/render-hooks/introduction.md
Bjørn Erik Pedersen 39fd3b5570 Squashed 'docs/' changes from a49697e53..ccb1b97cb
ccb1b97cb Update blockquotes.md
a5f51431c Add new-in label
39dac5838 Document ContentWithoutSummary
de3c75694 Clarify blockquote render hook Markdown syntax
d32f7856d Document change to data type returned by render hook Text methods
83fe7ccc3 Document table render hooks
601234147 netlify: Hugo 0.134.0
a583640a0 Add support for Obsidian type blockquote alerts
3e0080861 Merge commit 'dec8cd4ada'
2dde06576 output: Fix docshelper template lookup order for AMP pages

git-subtree-dir: docs
git-subtree-split: ccb1b97cbb11e60aab0108b33a270cccdd2218f6
2024-09-04 18:52:05 +02:00

2.6 KiB
Executable file

title description categories keywords menu weight
Introduction An introduction to Hugo's render hooks.
render hooks
docs
identifier parent weight
render-hooks-introduction render-hooks 20
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:

{{% note %}} Hugo supports multiple content formats including Markdown, HTML, AsciiDoc, Emacs Org Mode, Pandoc, and reStructuredText.

The render hook capability is limited to Markdown. You cannot create render hooks for the other content formats.

{{% /note %}}

For example, consider this Markdown:

[Hugo](https://gohugo.io)

![kitten](kitten.jpg)

Without link or image render hooks, this example above is rendered to:

<p><a href="https://gohugo.io">Hugo</a></p>
<p><img alt="kitten" src="kitten.jpg"></p>

By creating link and image render hooks, you can alter the conversion from Markdown to HTML. For example:

<p><a href="https://gohugo.io" rel="external">Hugo</a></p>
<p><img alt="kitten" src="kitten.jpg" width="600" height="400"></p>

Each render hook is a template, with one template for each supported element type:

layouts/
└── _default/
    └── _markup/
        ├── render-blockquote.html
        ├── render-codeblock.html
        ├── render-heading.html
        ├── render-image.html
        ├── render-link.html
        ├── render-passthrough.html
        └── render-table.html

The template lookup order allows you to create different render hooks for each page type, kind, language, and output format. For example:

layouts/
├── _default/
│   └── _markup/
│       ├── render-link.html
│       └── render-link.rss.xml
├── books/
│   └── _markup/
│       ├── render-link.html
│       └── render-link.rss.xml
└── films/
    └── _markup/
        ├── render-link.html
        └── render-link.rss.xml

The remaining pages in this section describe each type of render hook, including examples and the context received by each template.