【Hugo】リンクを新しいタブで開くためのTips

公開日時:2024年04月13日 カテゴリ:趣味

Hugo に移行してリンクを追加したときに気づいたがそのままリンク先に遷移してしまう。

自分用のメモにしてもクリックしてからまた戻ってくるのも面倒だ。

なのでそこを回避できる方法を調べてみた。

どうやら最近だとMarkdown render hooksという機能を使うのがいいらしい。
詳しくは公式のドキュメントで。

Markdown render hooks | Hugo

How to

/layouts/_default/_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>

linkの他にもimage heading codeblock といった部分に hook できるみたい。
注意点としてはレンダラーが Goldmark であることが条件。

_blank がいらないリンクの場合は?

別タブで開かずに従来どおりのリンクにしたい場合の状況は二通り。

内部リンクの場合

内部リンクの場合は相対リンクを使用すればそのまま遷移できるっぽい。

[Nintendo Switch「薔薇と椿 〜お豪華絢爛版〜」楽しそう](/video/2023/baratotubaki/)

↓ この場合は今まで通り

Nintendo Switch「薔薇と椿 〜お豪華絢爛版〜」楽しそう

外部リンクの場合

外部リンクの場合は・・・タグ直接書き込む方法になるのかな。
ただ、その場合は Goldmark の設定を変えて HTML タグの入力を許可する必要がある。

[markup.goldmark.renderer]
  unsafe = true

この状態で HTML を直接記入。

<a href="https://google.com"> google </a>

すると、こうなる ↓

google

外部リンクを同じタブで開きたい状況もそうそうない気がするのでセキュリティ重視で使わないと割り切ったほうがいい気がする。