Hugoはデフォルトだとリンクが同じタブで開かれる。

デフォルトの設定を変更し、外部リンクを新規タブで開くようにする方法を紹介する。

リンク用のHTMLを作成

/layouts/_default/_markup/render-link.htmlを作成する。

Hugoではリンク用のHTMLは/layouts/_default/_markup/render-link.htmlに定義すると決まっているので、一文字も違わないように/layouts/_default/_markup/render-link.htmlを作成する。

実装は以下。

{{- /*
  Forked from https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_default/_markup/render-link.html At 2025-03-25
  Added target="_blank" to external links
  */}}

{{- $u := urls.Parse .Destination -}}
{{- $href := $u.String -}}
{{- if strings.HasPrefix $u.String "#" -}}
  {{- $href = printf "%s#%s" .PageInner.RelPermalink $u.Fragment -}}
{{- else if and $href (not $u.IsAbs) -}}
  {{- $path := strings.TrimPrefix "./" $u.Path -}}
  {{- with or
    ($.PageInner.GetPage $path)
    ($.PageInner.Resources.Get $path)
    (resources.Get $path)
  -}}
    {{- $href = .RelPermalink -}}
    {{- with $u.RawQuery -}}
      {{- $href = printf "%s?%s" $href . -}}
    {{- end -}}
    {{- with $u.Fragment -}}
      {{- $href = printf "%s#%s" $href . -}}
    {{- end -}}
  {{- end -}}
{{- end -}}
<a href="{{ $href }}" {{- if strings.HasPrefix $href "http" }} target="_blank" rel="noopener" {{- end }} {{- with .Title }} title="{{ . }}" {{- end }}>{{ .Text }}</a>
{{- /**/ -}}

HugoのGitHubからリンクの実装をコピペして

{{- if strings.HasPrefix $href "http" }} target="_blank" rel="noopener" {{- end }}

を追加しただけである。

この実装ではhrefがhttpで始まっていたら外部URLだと判定するようにしている。

リンクを使う

上記の実装を終えたら、普通にリンクを使うだけで外部リンクが新規タブで開くようになる。

[外部リンク](https://example.com)