Hugoでマークダウンで記述したリンクは、同一タブでリンクに遷移してしまいますよね。違うサイトに遷移する場合、今のページは残したまま新規タブで開くようにしたいです。
Hugoの公式ドキュメントを参考に、マークダウンで生成されるHTMLの型を上書きするという方法で実現できたので共有します。
既存のマークダウンのリンク
マークダウンでリンクを記述する場合、以下のように記述しますね。
[リンク名](リンクのURL)この場合に実際のサイトに生成されるHTMLは以下のようになります。
<a href="リンクのURL">リンク名</a>しかし、新しいタブで開くためには以下のようなHTMLを生成して欲しいです。
<a href="リンクのURL" target="_blank" rel="noopener">リンク名</a>「target="_blank"」は「新しいタブでリンクを開く」という指示を与えています。
また、その際のセキュリティ上の問題で外部サイトを開く場合は「rel=”noopener”」もつけたほうがいいとされていますので、今回はそれも一緒に付与してみます。※詳しくはご自身で検索してみてください。
既存の型を上書きする
Hugoでは、自分で上書き用のファイルを用意することでこの型を上書きすることができます。
「layouts」フォルダ内の「_default」フォルダ内に「_markup」というフォルダを作り、その中に「render-link.html」というファイルを作ります。
このファイルに既存の型の代わりに置き換える型を記述することで、マークダウンのリンクで生成されるHTMLを変更することができます。
「render-link.html」に公式ドキュメントを参考に以下のように記述してみます。
<a href="{{ .Destination | safeURL }}" target="_blank" rel="noopener">{{ .Text | safeHTML }}</a>こうすればマークダウンで記述したリンクはこの型が適用され、以下のようなHTMLが生成されるようになります。
<a href="サイトのURL" target="_blank" rel="noopener">サイト名</a>構想通りですね！これで、無事マークダウンのリンクが新規タブで開けるようになりました。ただし、この方法だとマークダウンで記述した全てのリンクが新規タブで開かれることになるので注意してくださいね。
公式ドキュメント
マークダウンの型の上書きについてのより詳しい説明はHugoの公式ドキュメントの「Configure Markup」をご参照ください。
