HUGOのMarkdown Render Hooks機能で出力HTMLをカスタムする

• 前提：HUGOのMarkdown Render Hooks機能について
  • Markdown Render Hooks機能とは
  • Markdown Render Hooks機能で設定できる項目
  • Markdown Render Hooks機能の設定方法
• HUGOのMarkdown Render Hooks機能を活用する実践編
  • 画像ファイル
  • コードブロック
  • リンク

前提；HUGOのMarkdown Render Hooks機能について

1. Markdown Render Hooks機能とは
2. Markdown Render Hooks機能でカスタムできる項目
3. Markdown Render Hooks機能の設定方法

1つずつ、掘り下げていきます！

Markdown Render Hooks機能とは

Markdown Render Hooks機能とは、Markdownファイルから出力されるHTMLの内容を変更する機能です。
HUGOのv0.62.0から追加されました。

通常、Markdownファイルで、![ラーメン](https://~ramen.jpg)と書くと、出力されるHTMLは以下のようになります。

<p>
    <img src="https://~ramen.jpg" alt="ラーメン">
    </p>

この出力するHTMLを任意の形式にできるのが、Markdown Render Hooks機能です。

画像をfigureで主力したいみたいなら、毎回以下のように出力させれるようになります。

<figure>
    <img src="https://~ramen.jpg"
         alt="ラーメン">
    <figcaption>ラーメン</figcaption>
</figure>

それを実現するのがMarkdown Render Hooks機能です。

ショートコードを使わず、標準のMarkdownファイルのまま出力を変更できるのも魅力です。

Markdown Render Hooks機能でカスタムできる項目

Markdown Render Hooks機能でカスタムできる項目は以下です。（v0.98.0現在)

• image
• link
• heading
• codeblock

Markdownファイル中の画像、リンク、見出し、コードブロックに関するHTMLの出力が変更できます。

Markdown Render Hooks機能の設定方法

Markdown Render Hooks機能は、layoutsフォルダ内にhtmlを追加
することで設定できます。

layouts
├── _default
    ├── _markup
        └── render-image.html

上記のように、_defaultフォルダの中に_markupフォルダを作って出力してほしいHTMLを記述するだけです。

HUGOのMarkdown Render Hooks機能を活用する実践編

Markdown Render Hooks機能の基本がわかったところで、実践的な設定を見ていきましょう。

1. 画像ファイル
2. リンク
3. コードブロック

それぞれ、例を紹介します！

画像ファイル

画像ファイルでは、altが{{ .Text }}、URLが{{ .Destination }}、タイトルが{{ .Title }}に対応しています。

なので、冒頭のサンプルで紹介した、figcaptionつきのfigureで投稿するなら以下のように記述します。

<figure>
    <img src="{{ .Destination | safeURL }}"
         alt="{{ .Text }}">
    <figcaption>{{ .Text }}</figcaption>
</figure>

記事中の画像に特定のクラスを付加したいなら、以下のようにすることもできます。

<p>
    <img class="post-image" src="{{ .Destination | safeURL }}" alt="{{ .Text }}">
    </p>

リンク

コードブロック