短く書けるショートコード

Hugo には、いくつかのタグなどをまとめて1行で書けるショートコードという機能が用意されています。このショートコードは、事前に用意されているの物や独自に用意したものが使えます。

ここでは、事前に用意されているショートコードを使って、ショートコードとは何者なのかを確認していきます。

画像を扱うショートコード

Markdown を使って画像表示を記述するには、次のように記述することができます。

![フォントハンドリング](http://www.bnote.net/kuro_box/img/font-conf.gif)

hugo を使って HTML を生成すると次のように変換されます。

<img src="http://www.bnote.net/kuro_box/img/font-conf.gif" alt="フォントハンドリング">

例えば、この画像を <figure> で括りたい時、 Markdown で記述しているファイルの中に <figure> と </figure> が必要になります。

<figure>
![フォントハンドリング](http://www.bnote.net/kuro_box/img/font-conf.gif)
</figure>

このタグを追加する作業を省略してくれるのがショートコードになります。

それでは、 Hugo に用意されているショートコード figure を使ってみます。

{{ < figure src="/kuro_box/font-conf.gif" title="フォントハンドリングに使うバックエンドの選択" > }}

生成される結果は、次のようになります。

<figure>
  <img src="/kuro_box/font-conf.gif"  />
  <figcaption>
      <h4>フォントハンドリングに使うバックエンドの選択</h4>
  </figcaption>
</figure>

ショートコード figure には他にもパラメータが用意されており、それらを使うことで Markdown の記述を少ないコードで補うことができます。