Hugo で任意の HTML を生成したい場合は ShortCode を書くことになります。

本サイトでは使い道はさておきマテリアルアイコンを読み込んでいるので、 ShortCode で使えるようにしてみました。

Hugo からマテリアルアイコンを使う手順

まず themes/${テーマ名}/layouts/partials/header.html などに以下を追記してマテリアルアイコンのフォントを読み込みます。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

layouts/shortcodes/md-icon.html として以下の内容を用意し、ShortCode として使えるようにします。

ここで、vertical-align: bottom; はアイコンと文章の高さをそろえるための指定です。 また、.Get 0 で ShortCode の引数を取得しています。

Markdown ファイル中では以下のように書きます。これにより favorite が .Get 0 の部分に埋め込まれた HTML を生成します。

{{< md-icon favorite >}}

favorite favorite favorite 表示はこんな感じです favorite favorite favorite

なぜ Raw HTML ではなく ShortCode を書くのか

Markdown は HTMLを埋め込めるため、 アイコン表示の HTML (前述の Gist)を直接書いても表示されます。

ではなぜ ShortCode として用意するのかというと、 公式サイトの説明にある通り、 以下のような利点があるためです。

• 定型のHTMLを毎回書かずにすむ
• ShortCode を変更することで該当の HTML 部分がすべて置き換わるので更新が楽にすむ

そんなわけで、一生に一度の HTML だと心に決めている、というのでなければ、 ShortCode 化して再利用するほうが良いかと思います。