Day13：HugoのShortCodeに入門してみる(その4:QRShortCodeで学ぶ閉じタグとInner要素)

本記事の概要

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

前提

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

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

HugoのQRコード生成関数(images.QR)

Hugoにはimages.QRという、QRコードの画像を生成する関数が存在します。
これにより、様々なQRコードを生成することができます。

今回は一部機能しか触れませんが、詳細は下記の公式サイトの通りになっています。

QR ShortCode

上記のimages.QR関数は、qr ShortCodeとしてラッピングされています。
そのため、自作しなくても、下記ShortCodeを呼び出せば、images.QRを呼び出してQRコードの画像を生成する処理を簡単に実現できます。

こちらも、下記の公式サイトに詳細が書かれています。

実際に使ってみる

一番簡単な例で使ってみましょう。

例えば、読み込むとQiitaにジャンプできるQRコードは下記のようにして生成できます。

QRコードを表示する簡単な例1

{{< qr text="https://qiita.com" />}}

ここで、今までに見慣れない「/>}}」という閉じタグが出てきました。
これはHTMLと一緒で 「開始タグ」と「終了タグ」の間にテキストを挟めるものについて、終了タグが存在しない場合の記法になります。

ということは、下記のようにも書けるということです。
(ただし若干冗長ではありますが)

QRコードを表示する簡単な例2(例1と同じ意味)

{{< qr text="https://qiita.com" >}}{{< /qr >}}

当然、Inner要素にテキストを挟む形でも書けます。
もっと言えば、下記のようにも書けるということです。

QRコードを表示する簡単な例3(例1/例2と同じ意味)

{{< qr >}}https://qiita.com{{< /qr >}}

改行を入れても良いので、下記のようにも書けます。

QRコードを表示する簡単な例3に改行を入れた例

{{< qr >}}
https://qiita.com
{{< /qr >}}

といった形で、特定のURLにジャンプするQRコードを簡単に作れます。
様々な記法に対応しているので、好みや状況に応じて使い分けることが出来ます。

備考：QRコードの配置場所

特に指定しなければ、QRコードの画像は配置したサイト直下に置かれます。
別の場所に置きたい場合は、下記のようにtargetDirを指定できます。
下記の例では、サイト直下/hoge/内にに画像が配置されます。

配置場所の変更方法

{{< qr targetDir="/hoge/">}}https://qiita.com{{< /qr >}}