本記事の概要
Hugoのショートコードの入門となる初心者向けの記事です。
本記事はその5になります。
前提
Hugo+Blowfishテーマ適用済みの環境です。
なお、Windowsでの操作を想定しています。
(本記事が属するアドベントカレンダーについてもご確認ください)
また、その1～4の内容が前提となります。
組み込みのShortCodeでは毎回URLを書く必要がある
組み込みのqr ShortCodeでは、ジャンプ先のURLを手書きする必要があります。
今回は、記事から呼び出すことで、その記事のページにジャンプするQRコードを生成するqrselfShortCodeを作ってみます。
{{< qrself >}}
images.QRを使用したQRコードの生成
これを実現するには、images.QR関数を呼び出すShortCodeを自作すれば良いです。
qrselfShortCOdeは下記のようにして実装できます。
{{- $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を意識せず、簡単に呼び出せるので便利です。