MarkdownRenderHooks-リンク画像テンプレート作成する仕組み

こんにちはnasustです。 Hugo v0.62から新しい機能、Markdown Render Hooksがサポートされました。

Markdownの記法でリンクと画像を指定する書式があります。それらのテンプレートを指定する事が出来ます。

HugoのMarkdownエンジンがGoldmarkを使用している場合で有効です。

see also: Markdown Render Hooks

テンプレートの場所

下記の場所にテンプレートを作成します。画像であれば、render-image.htmlをリンクであればrender-linkです。

layouts
└── _default
    └── _markup
        ├── render-image.html
        ├── render-image.rss.xml
        └── render-link.html
bash

変数

Page

.Page変数です。

Destination

URLです。

Title

タイトルです。

Text

リンクのテキストです。

PlainText

画像の場合はalt属性のテキストです。

リンクのテンプレート例

Markdownのリンク

[Markdown Render Hooks](https://gohugo.io/getting-started/configuration-markup/#markdown-render-hooks)
markdown

Markdownのリンクのテンプレート

<a href="{{ .Destination | safeURL }}"
    {{ with .Title}} title="{{ . }}"{{ end }}
    {{ if strings.HasPrefix .Destination "http" }}
        target="_blank"  rel="noopener"
    {{ end }}
>
    {{ .Text }}
</a>
html

HTML出力

<a href="https://gohugo.io/getting-started/configuration-markup/#markdown-render-hooks"
    target="_blank"
    rel="noopener">
        Markdown Render Hooks
</a>
html
prevnext