Adventarの埋め込みをHugoでやる

こんにちは、たかしです。
早くも2023年も12月となりました。
年を取る度に月日の流れが加速している気がします。

さて、12月と言えばアドベントカレンダーですね！
毎年たくさんの方がアドベントカレンダー企画に参加して記事を書いていると思います。
アドベントカレンダー企画でよく使われているサービスとしてはAdventarが挙げられると思います。

シンプルで使いやすいサービスですよね。

Hugoで埋め込みたい

アドベントカレンダー企画の記事を投稿する場合、Adventarのカレンダーを記事内に埋め込むと参加している企画を手軽に紹介出来ていい感じですよね。
noteでは埋め込みに対応していて、URLを入力するとカレンダーの埋め込みができるようです。
しかし、Hugoでビルドしているこのブログには当然そんな機能はありません。
というわけで、Hugoの機能であるShortcodesを使用して簡単に埋め込めるようにしていきます。

Shortcodesって何？

Shortcodesはmarkdownファイルの中で使用できるスニペットのようなもので、Hugoで用意されています。
自分でも作れます。
例えば以下のようにmarkdownファイル内に書くと

{{< figure src="elephant.jpg" title="An elephant at sunset" >}}

以下のHTMLが生成されます。

<figure>
  <img src="elephant.jpg">
  <figcaption><h4>An elephant at sunset</h4></figcaption>
</figure>

Shortcodesを作る

ドキュメントにShortcodesの自作方法が書いてあります。

ShortCodesはlayouts/shortcodes ディレクトリに作成します。
とりあえずファイルを作ってみましょう。 今回はlayouts/shortcodes/adventar.htmlというファイルを作成します。
内容はとりあえずidを受け取って表示する簡単な内容にします。

<div>
    {{ if .Get "id" }}
        {{ .Get "id" }}
    {{ end }}
</div>

こうするとmarkdownファイル内で

{{< adventar id="123456" >}}

のようにShortcodesを呼び出すことができます!
とても手軽ですね。

iframeで埋め込む

以下のはてなブログの記事でiframeで埋め込む方法が解説されています。
はてなブログに埋め込む用で解説されていますが、今回はこれを参考にさせていただきます。

先ほどのadventart.htmlを以下のように編集します。

<div style="text-align: center">
    {{ if .Get "id" }}
    <iframe src='https://adventar.org/calendars/{{ .Get "id" }}/embed' width="620" height="362" frameborder="0" loading="lazy"></iframe>
    {{ end }}
</div>

例として、僕が参加するアドベントカレンダーを埋め込む場合は以下のように書きます。

// https://adventar.org/calendars/8596 の場合
{{< adventar id="8596" >}}

こうするとカレンダーが表示されます。

まとめ

今回はHugoで簡単なShortcodesの作り方を解説しました。
自分でも手軽に作れるのは非常に便利ですよね！
Hugoの個人的なお気に入りポイントです。

ちなみに、これはアドベントカレンダーの記事ではありません。
僕は12月23日にみすてむずのアドベントカレンダーに投稿する予定なので、読んでくださるとうれしいです。
ちなみに、何を書くかはまだ決まっていません。
頑張るぞい