まくまくHugo/Goノート
ショートコードで本文内に HTML スニペットを埋め込む
2017-09-29
記事の中に定型のコード(YouTube 動画表示用 HTML など)を埋め込みたいときは、Hugo のショートコード (Shortcode) の機能を使用すると便利です。

ショートコードの基本

Hugo は基本的にマークダウン形式で記事を記述していくのですが、マークダウンの表現力には限界があるので、ときには HTML を直接記述したくなることがあります。 しかし、毎回同じような HTML を記述するのでは、マークダウン形式を使用する意味がなくなってしまいます。 このような場合に、HTML 部分をショートコードとして外部ファイルに保存しておくと、記事の中に簡単にその HTML を埋め込めるようになります。

ショートコードは記事(コンテンツファイル)の中から呼び出すことができますが、テンプレートファイルの中からは呼び出せないことに注意してください。テンプレートの中から同様のことを行いたい場合は、パーシャルテンプレートの仕組みを使用します。

Hugo には、いくつかの組み込みのショートコードが用意されています。 例えば、下記は Youtube の動画や、Instagram の投稿を埋め込むためのショートコードの使い方の例です。

例: Youtube 動画を記事内に埋め込む

{{< youtube w7Ft2ymGmfc >}}
{{< youtube id="w7Ft2ymGmfc" autoplay="true" >}}

例: Instagram の投稿を記事内に埋め込む

{{< instagram BWNjjyYFxVx >}}

例: ツイートを記事内に埋め込む

{{< tweet 877500564405444608 >}}

ショートコードの呼び出し方

記事内からショートコードを呼び出すには、下記のような構文を使用します。

{{< shortcode-name param1 param2 >}}

名前付きのパラメータを使用する場合は、param1="value1" のように記述します。

{{< shortcode-name param1="value1" param2="value2" >}}

HTML タグのように、開始タグと終了タグで内部テキストを囲むこともできます (paired shortcode)。

{{< shortcode-name >}} Hello **World** {{< /shortcode-name >}}
{{% shortcode-name %}} Hello <b>World</b> {{% /shortcode-name %}}

前者のフォーマットを使用すると、内部テキストがマークダウンテキストとして処理されますが、後者のフォーマットを使用すると、テキストがそのまま使用されます。 内部テキストに HTML コードを含みたいようなケースでは、後者のフォーマットを使用すればよいでしょう。

2017-09-29