| categories:web

Hugo ショートコード

Hugoには投稿記事から簡単なカスタムスニペットを呼び出すための、ショートコードと呼ばれるものがあります。

例のようにユーチューブの動画を埋め込んだり、アマゾンの商品番号からフィリエイトのタグを埋め込んだりなど、 ポストごとにタグを打ち込んでいくような必要があり、頻繁に使用する必要がある場合にショートコードを使うとかなり便利です。後々の更新などもショートコードを変更するだけなので、メンテナンスも楽になります。(でも使いすぎると、他のジェネレーターに変えた時の意向が面倒かな。。)


テンプレートファイルの保管先とタイプ

Hugoの諸々のテンプレートファイルはほぼ全て同じ場所に保管されます。ショートコードも同様に /layouts/shortcodes/ に保存します。

ファイル名はショートコード名.html とします。

使用例(ユーチューブタグ)

youtubeの動画を埋め込むタグを作ります。フィル名は youtube.htmlになります。そのファイルを/layouts/shortcodes/に保存します。

youtube.htmlの中身は以下、{{ index .Params 0 }}でパラメータを読み込みます。

<div class="embed video-player">
<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/{{ index .Params 0 }}" allowfullscreen frameborder="0">
</iframe>
</div>

投稿記事へショートコードの埋め込みはシンプルで、{{ < youtube _WEMtYj2pJc > }}を挿入するだけです。 ちと、勝手ながら猫動画を。。

表示は以下のようになります。

書き出されるコードは以下。

<div class="embed video-player">
    <iframe class="youtube-player" type="text/html"
        width="640" height="385"
        src="http://www.youtube.com/embed/_WEMtYj2pJc"
        allowfullscreen frameborder="0">
    </iframe>
</div>

複数のパラメーターをとってきたりもできるらしいので、もう少し細かいことを知りたい方は本家のドキュメント を参照してください。

comments powered by Disqus