Markdown Render Hooks

はじめに

HugoのMarkdown Render Hooksの使い方を紹介します。

Markdown Render Hooksは、マークアップライブラリとして、Goldmarkを選択したときに利用できる機能です。

Goldmarkが出力するHTMLを変更することができます。変更できるのは、以下の3種類です。

  • image
  • link
  • heading

以下のユースケースが紹介されています。

  • .GetPageを使って、リンクを解決する。
  • 外部リンクに、target=_blankを追加する。
  • イメージの処理を行う。
  • ヘッダーリンクを追加する。

ファイル構成

Markdown Render Hooksは、以下に配置します。

  • layouts/
    • _default/
      • _markup/
        • render-image.html
        • render-link.html
        • render-heading.html

タイプやセクションごとに、異なる定義を行うこともできるようです。

  • layouts/
    • blog/
      • _markup/
        • render-image.html
        • render-link.html
        • render-heading.html

Hook内で利用できるコンテキスト

Hookでは、種類に応じて、以下のコンテキストが利用できます。

種類 .Page .Destination .Title .Text .PlainText .Level .Anchor .Attributes(map)
render-image ✔ ✔ ✔ ✔ ✔
render-link ✔ ✔ ✔ ✔ ✔
render-heading ✔ ✔ ✔ ✔ ✔ ✔

使用例

以下は、Hugoのサイトでも紹介されているrender-linkの利用例です。このサイトでも使用しています。

.Destination(参照先のURL)が、“http"で始まるときに、target="_blank" rel="noopener"を付加して、新しくウインドウを開くようにしています。

1

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

最終更新日

March 25, 2021

inserted by FC2 system