Hugoでshortcodeを使って簡単にブログカードを作成する話

2022-01-22

はじめに

各種ブログでは以下の様なブログカードを良く見ると思います。例えばWordPressであればSimple Blog Cardプラグインでブログカードを作れるみたいです。

このブログは静的サイトジェネレータのHugoを使って作られていますが、恐らく静的にHTMLを生成している関係で、Hugoにはブログカードを作る機能がありません。この記事ではHugoのshortcodeとはてなのブログカード機能を使うことで、Hugoでブログカードを簡単に使える様にします。

なおこの記事は基本的には以下のブログ記事の二番煎じになりますが、Hugoのshortcodeを使うことでより簡単に使える様にした点と、Emacsのox-hugoを使う際の方法に言及した点に違いがあります。

HugoのShortcodeについて

Hugoでは良く使われるhtmlを簡単に入力するための仕組みとして、shortcodeと呼ばれる仕組みがあります。要するにhtmlのマクロの様なもので、具体的にはtweetやgistの埋め込みやブログ内リンクの作成などのための専用タグを作ることができます。具体的な例はこのWebページを参照してください。

Hugoのshortcodeは layouts/shortcodes/ 以下に適当なHTMLファイルを置くことで自作することができます。「適当なHTMLファイル」のちゃんとした説明は以下のドキュメントを参照してください。

今回は元記事が使っていたHTMLを参考にして、以下のファイルを layouts/shortcodes/card.html として保存しました。

{{- $title := .Get "title" -}}
{{- $url := .Get "url" -}}
<iframe class="hatenablogcard" style="width:100%;height:155px;margin:15px 0;max-width:680px;" title="{{ $title }}" src="https://hatenablog-parts.com/embed?url={{ $url }}" frameborder="0" scrolling="no"></iframe>

Create Link

自分で上記のshortcodeを使ってもブログカードを作っても良いですが、どうせならブラウザから自動で生成できると便利です。ここでも元記事と同様にGoogle Chromeの拡張機能であるCrete Linkを使います。

基本的に元記事とやることは変わらないので詳細は省きますが、以下のshortcodeを自動で生成する様な設定を行えば良いです。

{{% card url="%url%" title="%title%" %}}

使い方

markdownでhugoの記事を書く場合、前述のCreate Linkで生成したshort codeを貼ることでブログカードを生成することができます。

一方Emacsのox-hugoを使ってorg-modeでhugoを書く場合、エスケープなどの不必要な変換を防ぐために、生HTMLとして記述する必要があります。具体的には例えば以下の様に書くことで、ブログカードを生成することができます。

#+HTML: <iframe class="hatenablogcard" style="width:100%;height:155px;margin:15px 0;max-width:680px;" title="Shortcodes | Hugo" src="https://hatenablog-parts.com/embed?url=https%3a%2f%2fgohugo.io%2fcontent-management%2fshortcodes%2f" frameborder="0" scrolling="no"></iframe>