本記事の概要

Hugoのショートコードの入門となる初心者向けの記事です。
本記事はその5になります。

前提

Hugo+Blowfishテーマ適用済みの環境です。
なお、Windowsでの操作を想定しています。
(本記事が属するアドベントカレンダーについてもご確認ください)

また、その1～4の内容が前提となります。

組み込みのShortCodeでは毎回URLを書く必要がある

組み込みのqr ShortCodeでは、ジャンプ先のURLを手書きする必要があります。
今回は、記事から呼び出すことで、その記事のページにジャンプするQRコードを生成するqrselfShortCodeを作ってみます。

今回作るShortCodeの呼び出し方

{{< qrself >}}

images.QRを使用したQRコードの生成

これを実現するには、images.QR関数を呼び出すShortCodeを自作すれば良いです。
qrselfShortCOdeは下記のようにして実装できます。

qrself.htmlの中身

{{- $text := $.Page.Permalink -}}
{{- $opts := dict 
    "targetDir" $.Page.RelPermalink
-}}
{{- with images.QR $text $opts -}}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{- end -}}

解説

1~4行目は、images.QR関数に引き渡すパラメータを設定しています。

1行目は、QRコードのtextを設定しています。今回はジャンプ先のURLを指定します。
ビルドされた記事のURLは「＄.Page.Permalink」で取得できるので、ユーザーから指定しなくても記事のURLを取得できます。

2～4行目はその他のオプションを指定します。
オプションはdict(辞書)の形式です。つまり、Key(名前)とValue(値)の形になります。
今回は、targetDir、つまり、QRコードの画像の配置先に対して「＄.Page.RelPermalink」を指定しています。

「＄.Page.RelPermalink」はビルドされた記事について、サイトルートからの相対的なURLを出力します。
これにより、QRコードの画像を記事と同じディレクトリに配置できます。

5～7行目は、実際にQRコードを表示するためのimgタグを埋め込む処理です。
5行目にwithとありますが、これによりimages.QRの戻り値のメンバへのアクセスが容易になります。
今回はimages.QRの結果について取り扱うので、with images.QR～という風になります。
6行目で.RelParmalink、.Width、.Heightなどと出てきますが、これは生成されたQRコードの相対URLや画像サイズを表します。
7行目は　withに対して、その終了をendという形で伝える必要があるので、それを記載することになります。

カスタマイズのヒント

ここではこれ以上触れませんが、optsに他のパラメータを指定したり、qrselfに引数を入れることで、さらにカスタマイズできるようになります。

images.QRのパラメータについては下記公式サイトを参照してみてください。

使い道

「このページへのQRコードはこちらです」といった文言を書いたのちに、qrself ShortCodeを埋め込むことで、そのページにジャンプできるQRコードを表示できます。
URLを意識せず、簡単に呼び出せるので便利です。