概要
Hugoは0.60からMarkdownレンダラ(レンダリングエンジン)を以前のBlackfridayからGoldmarkに変更した。 これに伴いBlackfriday向けにconfig.tomlに書いていたオプションが効かなくなった。
特にHTMLのaタグにおけるtarget="_blank"、すなわち「リンクを新しいタブで開く」の挙動は非常に重要だと感じるので、解決法をメモしておく。
これまで
HugoではMarkdownでのリンク記法である
[リンクテキスト](URL)
はデフォルトで
<a href="URL">リンクテキスト</a>
として出力され、target="_blank"が指定されていない、すなわち現在のタブで開かれる挙動になっている。
だが、外部のページへ遷移する場合は新しいタブで開かれたほうが便利という事も少なくない。
そのような場合、記事内のリンクを新しいタブで開かせるためには2つの方法があった。
1つ目
リンクを書く際は必ず
<a href="URL" target="_blank">リンクテキスト</a>
とHTMLタグを直書きする。
2つ目
[blackfriday]
hrefTargetBlank = true
を書き足すことでHugo(内のBlackfriday)のデフォルト挙動を変更する。
どちらの方法もHugo 0.60以降で用いるには一手間加える必要がある。
Hugoのバージョン確認
バージョンによって対処法が異なるため、シェルでhugo versionにて確認。
% hugo version
Hugo Static Site Generator v0.73.0/extended linux/amd64 BuildDate: 2020-06-23T20:43:44Z
この例では 0.73.0。 これが0.62以上かどうかで対処法が変わる。
0.60以降(かつ 0.62未満)での解決策
1の方法は現在(0.60以降のGoldmarkが有効なHugo)でも使えるが、Goldmarkは標準ではMarkdownへのHTMLタグ埋め込みを許可していない。
ただHTMLタグを埋め込んでも、その部分は無視され出力に反映されない。そこでHTMLタグの埋め込みを明示的に許可する必要がある。
config.tomlに
[markup.goldmark.renderer]
unsafe = true
と書き足すことで、1の方法の通り
<a href="URL" target="_blank">リンクテキスト</a>
のようにMarkdown中に埋め込んだHTMLタグが有効になる。
ただ、HTMLタグが埋め込めるようになる事によるリスクを考えれば、このためだけにHTMLタグの埋め込みを許可するのは望ましくないだろう。 記事内の他の部分でMarkdown記法のみでは不足であって結局HTMLタグの埋め込みが必要という場合もあるだろうが、 どちらにせよリンクの都度HTMLタグを書くのは不必要な手間がかかるしミスの原因になる。
2の方法はMarkdownレンダラを制御することで編集者がMarkdownの標準記法を用いたままリンクの挙動を変更できるものだが、プロパティ名からもわかるようにBlackfridayを対象としていて、レンダラがGoldmarkに変更された現在(0.60以降)のHugoでは効果がない。 どうしても用いたいならHugoが使うMarkdownレンダラそのものをBlackfridayに戻した上で上記の方法を用いる手段もあるが、やはり邪道の感が否めない。
Hugo 0.60以降で0.62未満の場合はこの解決策のどちらかを用いるしかない。
可能であるならHugoを0.62以降に更新し、下の方法を用いるのが望ましいと思われる。
今後(0.62以降)
Hugo 0.62以降ではMarkdown Render Hooksという仕組みが導入された。これはレンダラの動作をフックし、該当部分の出力を書き換えられるもの。これによって今回のようにリンクだけ、画像だけなど、範囲を限定してレンダラの挙動を変更できる。
リンクの挙動を変更するには以下の通り。
[プロジェクトルート]/layouts/_default/_markup/render-link.html というファイルを作り、そこに
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text }}</a>
と指定することでMarkdown記法([リンクテキスト](URL))で作成したリンクにtarget="_blank"が書き加えられて出力される、すなわちリンクが新しいタブで開かれるようになる。
Hugoの標準的な動作に則っているし、記事内では今まで通りMarkdown記法が使えるのでミスも起きにくい。 今後はこの方法が望ましいと思われる。
出典
How to Open Link in New Tab with Hugo's new Goldmark Markdown Renderer - Prasad's Pen
更新履歴
2020-02-29 細かな表現を修正。
2020-07-02 バージョン確認方法を追加。