Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
OrganizationAdvent CalendarQiitadon (β)
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Hugo Markdown Render Hooks 入門

More than 1 year has passed since last update.

Hugo v0.62.0 クリスマスエディションが今年もリリースされました。

今回の目玉機能 Markdown Render Hooks の使い方を解説します。

Hooks は Markdown parser に Goldmark を利用している時に利用可能で、最新の Hugo はデフォルト Markdown parser が Goldmark です。

Markdown Render Hooks はリンクや画像に対してある属性を付けたい、など共通の処理を施したい時に重宝します。ショートコードを作らなければならない場面がぐっと減るでしょう。ショートコードではなく、普通のマークダウンを維持できるので、エディターや Headless CMS のプレビュー機能との親和性が高まったと思います。

Markdown Render Hooks リンク編

導入方法は以下のような layouts/_default/_markup/render-link.html を作成するだけです。

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

そしてコンテンツに Markdown 記法で以下のようなリンクを書くと、

[Hugo](https://gohugo.io/ "Hugo homepage")

次のような HTML が生成されます。

<a href="https://gohugo.io/" title="Hugo homepage" target="_blank" rel="noopener">

これにより http で始まる外部リンクに対して target="_blank" rel="noopener" を 自動的に付与できるようになりました。内部リンクは [My post](/posts/path/to/article.md) のように書くと思うので target="_blank" が付与されることはありません。

参考: Handle external links with Render Hook Templates - tips & tricks - Hugo

Markdown Render Hooks 画像編

画像にも Markdown Render Hook を設定できます。例えば以下のようにリサイズ処理を仕込むことが可能です。ファイルは layouts/_default/_markup/render-image.html です。

{{ $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}
{{ $small := $image.Resize "480x jpg" }}
{{ $medium := $image.Resize "768x jpg" }}
{{ $large := $image.Resize "1024x jpg" }}
{{ $alt := .PlainText | safeHTML }}

  <source media="(max-width: 480px)" srcset="{{ $small.RelPermalink }} 480w">
  <source media="(max-width: 768px)" srcset="{{ $medium.RelPermalink }} 768w">
  <source media="(max-width: 1024px)" srcset="{{ $large.RelPermalink }} 1024w">
  <img src="{{ $image.RelPermalink }}" alt="{{ $alt }}" decoding="async" loading="lazy">


![Gopher image](path/to/gopher_image.jpg)

以下は実際に hugo server してページソースをブラウザで見たものです。

  <source media="(max-width: 480px)" srcset="http://localhost:1313/posts/github-pages-and-github-actions/eyecatch_hu3797a08418e1e841687b41b638a04d4c_44015_480x0_resize_q75_box.jpg 480w">
  <source media="(max-width: 768px)" srcset="http://localhost:1313/posts/github-pages-and-github-actions/eyecatch_hu3797a08418e1e841687b41b638a04d4c_44015_768x0_resize_q75_box.jpg 768w">
  <source media="(max-width: 1024px)" srcset="http://localhost:1313/posts/github-pages-and-github-actions/eyecatch_hu3797a08418e1e841687b41b638a04d4c_44015_1024x0_resize_q75_box.jpg 1024w">
  <img src="http://localhost:1313/posts/github-pages-and-github-actions/eyecatch.jpg" alt="GitHub Actions for GitHub Pages" decoding="async" loading="lazy">



replaceRE とかでゴリゴリやったり、Shortcode を作ったりしていました。

Markdown Render Hooks を使えば Markdown 記法でリンクや画像を設置できるため、エディターや Netlify CMS などでちゃんとプレビューできるようになります。積極的に使っていきたいですね。

Hugo ʕ◔ϖ◔ʔ や GitHub Actions について書いています。こっち https://peaceiris.com/ に引っ越しましたので、今後 Qiita への新規投稿はしませんが記事のメンテはします。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away