Markdown が苦手なことも
Hugo のブログ運営に欠かせないのが Shortcode の仕組みだと思います。
IT エンジニアは、 Markdown を書き出すとこれ一色になってしまって「 Markdown マジ神」みたいになりやすいのですが、シンプルな記法であるため、ちょっと複雑な HTML など、表現できないこともたくさんあるわけです。
プロジェクトのかんたんなドキュメントなら良いかもしれませんが、ブログとなると、ちょっと凝ったレイアウトとかしたいじゃないですか ?
そんなときに、やむを得ず Markdown 中に HTML を書いてしまったりすることもあるとおもうのですが、どちらかというと本末転倒なことですよね。
Shortcode とは
Hugo でそれを解決する仕組みが、 Shortcode です。
その Shortcode は「コンテンツ中にカスタムテンプレートを埋め込むためのスニペット」と公式で説明されています。
要するに
- 使いやすい HTML テンプレートをつくっておいて
- かんたんに呼び出せて
- しかも動的にできる
というシロモノです。
当ブログでも次のような Shortcode を自作して活用しています。
- 画像
- 内部リンク
- 外部リンク
- Amazon アソシエイト
他にも LINE 風フキダシや、Twitter 、 YouTube を埋め込む Shortcode など、活用シーンはとても多いですね。
Shortcode について Hugo 公式はこちらです。
Shortcode を追加するには
Shortcode は HTML ファイルを作って layouts/shortcodes に 入れておけば OK です。
ファイル名が test.html なら test という Shortcode として呼び出すことができます。
HTML にデザインを当てる場合は、インラインで書かずに別途 CSS を整備しておくと良いですね。
Shortcode のサンプル
サンプルとして、 「ボックスで装飾されたリンク」を追加します。
Markdown でもリンクくらいできる、のですが、CSS をあて見た目を良くしたものを Shortcode 化しています。
Markdown の画像やリンクって覚えられなくて。Shortcode 本体
次の HTML を layouts/shortcodes/entry_card.html にファイル保存します。
1<div class="entry-card">
2 <a href="{{ .Get "href" }}" target="_blank" rel="noopener noreferrer">
3 {{ if .Get "title" }}
4 <span class="title">{{ .Get "title" }}</span>
5 {{ end }}
6 <span class="url">{{ .Get "href" }}</span>
7 </a>
8</div>コンテンツの埋め込み
この Shortcode を使ってキャプション付きで画像を差し込む場合、コンテンツの Markdown の中に埋め込みます。
1{{％ entry_card
2 title="リンクのサンプル"
3 href="http://example.com/hoge/fuga"
4％}}出来上がった HTML
これをビルドすると、次の HTML ができました。
1<div class="entry-card">
2 <a href="http://example.com/hoge/fuga" target="_blank" rel="noopener noreferrer">
3
4 <span class="title">リンクのサンプル</span>
5
6 <span class="url">http://example.com/hoge/fuga</span>
7 </a>
8</div>Shortcode を使おう
エディタによっては Markdown と HTML を混在させるとコードハイライトが変になって目が痛くなっちゃったしますよね。
そして、そもそもが Markdown に HTML を混ぜるのはなんか邪道じゃないですか。
その点、Shortcode はスッキリおさまって、繰り返しのタイプも減るので、活用すると幸せに近づけると思います。
I-O DATA ポータブルSSD 960GB SSPH-UT960K/E ブラック
[特長]ハードディスクよりも転送速度が高速な外付SSD(960GB) [対応機種]Windows PC、Mac、PS4、PS4 Pro USB 3.0/USB 2.0 ※動作環境: USB 3.0/USB 2.0いずれかのポートを装備した機種 (USB 3.0/USB 2.0いずれかのインターフェイス商品を装備した機種を含む) [サイズ]幅:8.0cm×奥行き:8.0cm×高さ:1.5cm / 質量:約55g [添付品]USB3.0ケーブル A-Micro B(約30cm)1本、取扱説明書、PS4接続ガイド [その他]1年保証