Hugoのshortcodeのメモ

Feb 16, 2016 · web
hugogithub

Hugoのshortcodeを使って、記事の中でHTMLのタグをべた書きしなくて良い様にする方法のメモ。あと、おまけでshortcodeをMarkdownの中でエスケープして表示する方法。

画像を貼り付けるshortcode

Hugoで画像を表示するには、staticの中に置く必要がある。この中は全サイト共通になっているので、整理しやすいように以下のディレクトリ構成にした。

- static
    - media
        - 2016-02-16-sprite-shader
            - comp.png
            - beta.gif
        - 2016-02-18-hugo-shortcode
            - sample.jpg
        ...

mediaの中に、記事毎に[作成日付]-[slug]というディレクトリを作り、その中に画像などのコンテンツを置いている。

この状態で記事の中で画像を表示させるには、{{< figure src="/media/2016-02-18-hugo-shortcode/sample.jpg" >}}となる。

これを毎回書くのは面倒だがshortcodeを使うと、{{< img "sample.jpg" >}}とだけ書けばよい。

作り方

1. <site-name>/layouts/shortcodes/img.htmlを作成
2. 1のファイルに を貼り付けて保存
3. あとは使いたい場所で{{< img "ファイル名" >}}とすればOK

エスケープ方法

記事の中で、shortcodeなどを表示させたい場合に、そのまま書くと当然ながらそのコードが実行されてしまうので、エスケープが必要となる。

このエスケープ方法は幾つかある（他にもあるかも）

1. \をつける方法
   \{\{< コード >}}
2. {を<と入力する方法
   {{< コード >}}
3. /**/のコメントにする方法
   {{/* コード */}}

で、一番おすすめなのは3の方法。他の方法だと``で囲った時にうまく表示されないので。

参考リンク

• 公式：Hugo - Shortcodes