+++

Hugoでテーマをカスタマイズしていると、「Markdownのシンプルな書き方はそのまま維持しつつ、最終的に出力されるHTMLのタグ構造だけを少し書き換えたい」と思う場面が多々あります。

  • 外部リンクだけ別タブ（target="_blank"）で開きたい
  • 画像タグに自動で loading="lazy" を付与したい
  • 見出し（h2など）の横にアンカーリンクのアイコンを表示したい

このような細やかなタグの制御を、Markdownファイルを一切汚さずに実現してくれるのが、Hugoの強力な機能 「Render Hooks（レンダーフック）」 です！

Render Hooks の仕組み

通常、HugoはMarkdownを「標準的なHTML」に変換します。

graph LR MD[Markdown] --> Engine[変換エンジン] --> HTML[標準のHTML]

Render Hooksを使うと、この変換プロセスに「独自のルール」を割り込ませることができます。

graph LR MD[Markdown] --> Hook{Render Hook} --> HTML[カスタムHTML]

つまり、「リンクが見つかったら、標準の変換ではなく、私が書いた template ファイルを使ってね」 とHugoに指示できる機能なのです。

よく使われる 3つの Hooks

[テキスト](URL) という書き方を制御します。

2. 画像 (render-image)

![代替テキスト](画像URL) という書き方を制御します。

  • 活用例:
    • すべての画像に loading="lazy" (遅延読み込み) をつける。
    • 画像の下にキャプションを表示する。
    • レスポンシブ対応のクラスを自動でつける。

3. 見出し (render-heading)

## 見出し などの書き方を制御します。

  • 活用例: 見出しの横に # マークのリンク（アンカーリンク）を表示して、その場所へ直接リンクできるようにする。

Render HooksでMarkdownの拡張性を手に入れよう

Render Hooksを使えば、「毎回HTMLタグを手書きする」という手間を省き、Markdownの手軽さはそのままに機能的でリッチなWebページを作ることができます。
「Markdownの標準機能だけでは物足りない…」と感じた時は、独自のHTML直書きに逃げる前に、ぜひRender Hooksのカスタマイズで解決できないか検討し、テーマ開発の幅を広げていきましょう！💪