HugoでMarkdown Render Hooksを使ってみた。

Hugoのリンクは、基本的に同一タブで遷移を行う形になっているが、外部サイトやサブドメインは新規のタブで開きたいなと以前から思っていた。
Markdown Render Hooksと言うのを使えばできそうというのが分かったので、試してみた。

テンプレートを作成
サイドメニューとサービスアイコンの処理も変更
動作確認してみる

テンプレートを作成

以下の階層にファイルを作成する。今回は「render-link.html」を作成する。
内容は公式の内容をいったん持ってくる。
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>

そのままでもいいが、別タブで開くと見た目で分かるように、外部サイトの場合はアイコンも表示するように修正しておく。

<a href="{{ .Destination | safeURL }}"
  {{ with .Title}} title="{{ . }}"{{ end }}
  {{ if strings.HasPrefix .Destination "http" }}
    target="_blank" rel="noopener noreferrer" 
  {{ end }}
>
  {{ .Text | safeHTML }}
  {{ if strings.HasPrefix .Destination "http" }}
    <i class="fa fa-external-link"></i>
  {{ end }}
</a>

サイドメニューとサービスアイコンの処理も変更

サイドメニューのリンクとTwitterやGitHubのアイコンのリンクも併せて修正する。
修正前のコードは以下。

    <ul class="sidebar-nav">
      <li class="sidebar-nav-item"><a href="{{ "/" | absURL }}">{{ if isset .Site.Params "home"}}{{ .Site.Params.home }}{{ else }}Blog{{ end }}</a></li>
      {{ range .Site.Menus.main }}
        <li class="sidebar-nav-item">{{ .Pre }}<a href="{{ .URL | absURL }}">{{ .Name }}{{ .Post }}</a></li>
      {{end}}
    </ul>

サイドメニューについては、render-link.htmlと同じように内部か外部かを判定する処理を追加する。（タグ内に埋め込んでもよさそうだけど、見にくくなりそうだったので、大きく分岐作ってる。）

    <ul class="sidebar-nav">
      <li class="sidebar-nav-item"><a href="{{ "/" | absURL }}">{{ if isset .Site.Params "home"}}{{ .Site.Params.home }}{{ else }}Blog{{ end }}</a></li>
      {{ range .Site.Menus.main }}
        {{ if strings.HasPrefix .URL "http" }}
          <li class="sidebar-nav-item">{{ .Pre }}<a href="{{ .URL | absURL }}" target="_blank" rel="noopener noreferrer">{{ .Name }}{{ .Post }}</a></li>
        {{ else }}
          <li class="sidebar-nav-item">{{ .Pre }}<a href="{{ .URL | absURL }}">{{ .Name }}{{ .Post }}</a></li>
        {{ end }}
      {{end}}
    </ul>

GitHubとTwitterのアイコンの処理も修正する。
修正前は以下。

      {{ with .Site.Params.github }}<a href="{{ . }}"><i class="fa fa-github-square fa-3x"></i></a>{{ end }}
      {{ with .Site.Params.twitter }}<a href="{{ . }}"><i class="fa fa-twitter-square fa-3x"></i></a>{{ end }}

GitHubとTwitterは外部サイト一択なので、タグにtargetを追加する。

      {{ with .Site.Params.github }}<a href="{{ . }}" target="_blank" rel="noopener noreferrer"><i class="fa fa-github-square fa-3x"></i></a>{{ end }}
      {{ with .Site.Params.twitter }}<a href="{{ . }}" target="_blank" rel="noopener noreferrer"><i class="fa fa-twitter-square fa-3x"></i></a>{{ end }}