1
0
mirror of https://github.com/gohugoio/hugo.git synced 2024-05-11 05:54:58 +00:00

Squashed 'docs/' changes from a393f4cf4..63386081c

63386081c update cSpell config update
15c76494b Update cSpell custom dictionary (#1694)
34f3167b7 Update image processing (#1625)
7462cc798 fix: pipes in sample code break table creation (#1686)
48736447e Update anchorize.md
2ff0bd10b netlify: Hugo 0.95.0
0fc1d21b2 Update configuration.md
41855e372 Fix #1682
8c663433e Update related.md
7aa072eab netlify: Hugo 0.94.2
1682c7ee7 Update render-hooks.md
ce1283cc4 Move the Render Hooks doc to its own page
bbbbfbfc6 Update configuration-markup.md
92d91a316 Update configuration-markup.md
2e8068823 Update configuration-markup.md
ff2dbca60 Update configuration-markup.md
89d8e5d65 Add code block documenation
e993539f0 Update shortcodes.md
c1b28dbfe netlify: Hugo 0.94.1
81b8c9b83 Merge branch 'tempv0.94.1'
4763b3d50 docs: Regenerate CLI docs
b18463971 netlify: Bump to Hugo 0.94.0
4152ebc1d Merge branch 'tempv0.94.0'
ba3a11ac2 docs: Regenerate docshelper
e64016d13 docs: Regenerate docshelper
29180e4d2 add `.html` suffix to partial usage and references
3213e00f2 Docs tidy-up
6cfcae4b7 docs: Regenerate CLI docs
8a6cd0b4d docs: Regenerate docshelper
b20ab262f Merge commit 'd706529720b3b2ccb99719ccd578062ca25a0cc2'

git-subtree-dir: docs
git-subtree-split: 63386081c55de6a7f97adde564a9cfc2ad326119
This commit is contained in:
Bjørn Erik Pedersen
2022-03-26 11:04:57 +02:00
parent d706529720
commit d276e901b3
30 changed files with 674 additions and 390 deletions

View File

@@ -119,119 +119,5 @@ ordered
## Markdown Render Hooks
{{< new-in "0.62.0" >}}
See [Markdown Render Hooks](/templates/render-hooks/).
Note that this is only supported with the [Goldmark](#goldmark) renderer.
Render Hooks allow custom templates to override markdown rendering functionality. You can do this by creating templates with base names `render-{feature}` in `layouts/_default/_markup`.
You can also create type/section specific hooks in `layouts/[type/section]/_markup`, e.g.: `layouts/blog/_markup`.{{< new-in "0.71.0" >}}
The features currently supported are:
* `image`
* `link`
* `heading` {{< new-in "0.71.0" >}}
You can define [Output-Format-](/templates/output-formats) and [language-](/content-management/multilingual/)specific templates if needed. Your `layouts` folder may look like this:
```bash
layouts
└── _default
└── _markup
├── render-image.html
├── render-image.rss.xml
└── render-link.html
```
Some use cases for the above:
* Resolve link references using `.GetPage`. This would make links portable as you could translate `./my-post.md` (and similar constructs that would work on GitHub) into `/blog/2019/01/01/my-post/` etc.
* Add `target=_blank` to external links.
* Resolve and [process](/content-management/image-processing/) images.
* Add [header links](https://remysharp.com/2014/08/08/automatic-permalinks-for-blog-posts).
### Render Hook Templates
The `render-link` and `render-image` templates will receive this context:
Page
: The [Page](/variables/page/) being rendered.
Destination
: The URL.
Title
: The title attribute.
Text
: The rendered (HTML) link text.
PlainText
: The plain variant of the above.
The `render-heading` template will receive this context:
Page
: The [Page](/variables/page/) being rendered.
Level
: The header level (1--6)
Anchor
: An auto-generated html id unique to the header within the page
Text
: The rendered (HTML) text.
PlainText
: The plain variant of the above.
Attributes (map) {{< new-in "0.82.0" >}}
: A map of attributes (e.g. `id`, `class`)
#### Link with title Markdown example:
```md
[Text](https://www.gohugo.io "Title")
```
Here is a code example for how the render-link.html template could look:
{{< code file="layouts/_default/_markup/render-link.html" >}}
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
{{< /code >}}
#### Image Markdown example:
```md
![Text](https://d33wubrfki0l68.cloudfront.net/c38c7334cc3f23585738e40334284fddcaf03d5e/2e17c/images/hugo-logo-wide.svg "Title")
```
Here is a code example for how the render-image.html template could look:
{{< code file="layouts/_default/_markup/render-image.html" >}}
<p class="md__image">
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
</p>
{{< /code >}}
#### Heading link example
Given this template file
{{< code file="layouts/_default/_markup/render-heading.html" >}}
<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}">¶</a></h{{ .Level }}>
{{< /code >}}
And this markdown
```md
### Section A
```
The rendered html will be
```html
<h3 id="section-a">Section A <a href="#section-a">¶</a></h3>
```