Markdown Render Hooks - リンクや画像のテンプレートを作成する仕組み

こんにちは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

変数

Page

.Page変数です。

Destination

URLです。

Title

タイトルです。

Text

リンクのテキストです。

PlainText

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

リンクのテンプレート例

Markdownのリンク

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

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

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

HTML出力

<a href="https://gohugo.io/getting-started/configuration-markup/#markdown-render-hooks"
    target="_blank"
    rel="noopener">
        Markdown Render Hooks
</a>
iOS、Android、Web、APIサーバーなどのフロントエンド・バックエンドを開発するソフトウェアエンジニアです。 UI/UXが好きです。かっこいいUIやWebデザインを眺めるのが趣味です。 このブログはソフトウェア開発関係の内容を記事にしています。
web service:
GitHubQiitaTwitterはてなブログ
handle name:
nasust
real name:
hideki mori
job:
ソフトウェアエンジニア
develop:
target: ios, android, web page, single page application, api server, system service, cli tool, linux embedded device

lang: c/c++, go, swift, objective-c, java, kotlin, typescript, dart, javascript, ruby, python, php

tool: vscode, xcode, android studio, photoshop, vim, docker