Hugo Render hooksでimageとlinkをカスタマイズ

Hugoで画像を挿入するには、標準のMarkdownで![Text](Link-URL)を書くと、<img src "~">にレンダリングされますが、ネイティブ Lazy-loadをimgタグに組み込みたいと思ってました。
ちなみに、ネイティブLazy-loadは、

Javascriptを必要とせず、HTMLのloading属性を追加するだけで画像の遅延読み込みを簡単に構成できます

最初は、figureタグやショートカットを利用しないと挿入出来ないと思い、試行錯誤していましたが、調べてみると、HugoのRender hooksを利用すると可能になることを知りました。
Render hooksを詳しく知りたい方は、公式を参照してください。

ネイティブLazy load組込 

• loading=“lazy’属性を追加
• decoding=“async"属性を追加

当初、lazyを組み込んだのですが、
decoding="async"とloading="lazy"は、併記しても両立しないため、decoding="async"を採用しました。
併記した場合は、lazyが優先されます

Hugo/layouts/_defaults/_markup/render-image.html

{{ $link := string .Destination }}
{{ if hasPrefix $link "http" }}
<img decoding="async" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
{{ else }}
<img decoding="async" src="{{ .Page.Permalink }}{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
{{ end }}

aリンクカスタマイズ 

• 外部URLのリンクはtarget="_blank"で別タブで開く
  セキュリティ的に、noreferrer noopener も追加
• 内部リンクでは別タブを開かない

Hugo/layouts/_defaults/_markup/render-link.html

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

Gist 

これらカスタマイズしたものをGistにも明記しておきました