HUGOのTips〜aタグのリンクを新しいタブで開く設定や画像の表示調整について〜

HUGOのちょっとした設定についての解説です。

Ishiguro Suguru

HUGOサイトを作成してデフォルトの挙動から修正した内容について紹介します。 この設定はわりと需要があると思うので。

やりたかったこと

HUGOで作成したサイトについて以下を実施しました。 他テーマでも有効な設定であるため興味ある方は参考にしてみてください。

  1. aタグのリンクを新しいタブで開く
  2. fancyBoxを使用した画像表示

1. aタグのリンクを新しいタブで開く

マークダウンファイルにリンクを挿入する場合、[TEXT](URL)こんな書き方をしていると思います。 HUGOではこれでaタグが生成されますが、新しいタブで開くためのオプションtarget="_blank"がつきません。

解決策としてMarkdown Render Hooksという機能を使用すればtarget="_blank"をリンクにつけることができます。 手順は非常に簡単ですがHUGOのバージョンがv0.62以降で使用できる機能のため事前にバージョンを確認してアップデートしてください。

# HUGOバージョン確認
hugo version
# 必要に応じてアップデート
brew upgrade hugo

まずはソースディレクトリ直下の以下のフォルダにrender-link.htmlを作成します。 このファイルでaタグの出力をオーバーライドできます。

layouts
└── _default
    └── _markup
        └── render-link.html

作成したファイルに以下の内容を記述します。（わかりやすくするために改行しています） このように記述することでリンクの参照先が外部（URLに"http"がつく）の場合にtarget="_blank"、rel="noopener"がつきます。 相対パスでURLを記述すると内部リンク扱いとなりオプションはつきません。

<a href="{{ .Destination | safeURL }}"
  {{ with .Title}} title="{{ . }}"{{ end }}
  {{ if strings.HasPrefix .Destination "http" }}
    target="_blank" rel="noopener"
  {{ end }}
>
  {{ .Text | safeHTML }}
</a>

2. fancyBoxを使用した画像表示

fancyBoxは画像をクリックするとポップアップ表示する機能を実現するためのjQueryプラグインです。 マークダウンファイル内でこのfancyBoxを使用したかったため、HUGOのShortcode（ショートコード）を作成してお手軽に利用できるようにしました。

マークダウンファイル内で記事を書く際にはどうしてもHTMLタグで記述する場面が出てくると思います。 頻繁に出てくる場合はこのショートコードと呼ばれる機能を使用して共通化できます。

このサイトで使用しているテーマ「Hugo Future Imperfect」ではfancyBoxを使用したショートコードが用意されているのでそのショートコードを他のテーマに組み込んでみましょう。

まずはテンプレートファイルfancybox.htmlをソースディレクトリ直下の以下のフォルダに作成します。 ショートコードはこのフォルダに配置したHTMLファイルをテンプレートファイルとして認識します。

layouts
└── shortcodes
    └── fancybox.html

次にfancybox.htmlファイルの内容を編集します。 以下の内容をコピーして貼り付ければOKです。 ここではパラメータに応じて値を設定しています。

<!--
    Inside Double Brackets:

    fancybox path="path" file="file" caption="caption" gallery="gallery"
    fancybox "path" "file" "caption" "gallery"

    # of Params: 2-4
    Positional or Named

    position 0, name: path
        Can pass in the following values:
            title: will use /img/LinkTitle as the path
            date: will use /img/Year/Month as the path
            /path/to/img: can pass in explicit path to the image

    position 1, name: file
        Name of the file including the file extension

    position 2, name: caption
        Text for the caption of the image

    position 3, name: gallery
        Name of the gallery the image should be included in
-->
{{ $numOfParams := len .Params}}
{{ if and (ge $numOfParams 2) (le $numOfParams 4) }}
  {{ if .IsNamedParams }}
    {{ $.Scratch.Set "path" (.Get "path") }}
    {{ $.Scratch.Set "file" (.Get "file") }}
    {{ $.Scratch.Set "caption"  (.Get "caption") }}
    {{ $.Scratch.Set "gallery" (.Get "gallery") }}
  {{ else }}
    {{ $.Scratch.Set "path" (.Get 0) }}
    {{ $.Scratch.Set "file" (.Get 1) }}
    {{ if ge $numOfParams 3 }}
      {{ $.Scratch.Set "caption" (.Get 2) }}
    {{ else }}
      {{ $.Scratch.Set "caption" "" }}
    {{ end }}
    {{ if ge $numOfParams 4 }}
      {{ $.Scratch.Set "gallery" (.Get 3) }}
    {{ else }}
      {{ $.Scratch.Set "gallery" ""}}
    {{ end }}

    {{ $.Scratch.Set "structType" "shortcode" }}
    <!-- {{ partial "img-path" . }} -->

    {{ $path := $.Scratch.Get "path" }}
    {{ $file := $.Scratch.Get "file" }}
    {{ $caption  := $.Scratch.Get "caption" }}
    {{ $gallery := $.Scratch.Get "gallery" }}

    <div class="fancybox">
      <a data-fancybox="{{ $gallery }}" href="{{ $path }}/{{ $file }}" data-caption="{{ $caption }}"><img src="{{ $path }}/{{ $file }}"></a>
    </div>
  {{ end }}
{{ end }}

あとはfancyBoxのプラグインを読み込むように設定すれば動作します。 各テーマのベースとなるレイアウトファイルでJavaScriptファイルとCSSファイルをインポートしましょう。 たとえばHUGOテーマ「Mainroad」の場合/layouts/_default/baseof.htmlファイルを以下のように編集します。

<!DOCTYPE html>
<html class="no-js" lang="{{ .Site.Language.Lang }}">
<head>

  <!-- 中略 -->

  <!-- Add fancyBox3 -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
  <!-- Add fancyBox3 -->
</head>
<body class="body">

  <!-- 中略 -->

</body>
</html>

以上で設定は完了です。 実際にマークダウンファイル内で使用するときは以下のように記述しましょう。

  • マークダウンファイルの記入例
- 構文
{{< fancybox "ファイルパス" "ファイル名" "キャプション（任意）" "グループ名（任意）" >}}
- 記入例
{{< fancybox "." "2020-08-07-22-39-17.jpg" "Googleカレンダー作成1" "gallery" >}}
  • 生成するHTMLタグ
<div class="fancybox">
  <a data-fancybox="gallery" href="./2020-08-07-22-39-17.jpg" data-caption="Googleカレンダー作成1">
    <img src="./2020-08-07-22-39-17.jpg">
  </a>
</div>

最後に

新しいタブで開く動作はサイト外のリンクではよく使うところだと思います。 是非試してみてください！

comments powered by Disqus