Hugoでショートコードを使う

Hugoでは、個々のpostやpageはMarkdownで書くんだけど、Markdown記法だけではカバーできないものもある。

そうなるとMarkdownファイルの中にHTMLを書くことになって、なんか気持ち悪い。

あと、テンプレート的に何度も使い回すようなものは、いちいち手打ちするんじゃなくて省略させたい。要するにとにかく楽をしたい。

そんなときにこそショートコードを使う👍

どう使うの？

layouts/shortcodesにhogehoge.htmlの形で置いておく

layouts/partialに置くテンプレートとの違いは？

table:比較

Markdown内で変数が

ショートコード使える使える

テンプレート使えない使えない

具体的な使い方

layouts/shortcodes（なければ作る）に、ショートコードを置いておく

ショートコード名.htmlの形式

記事内で呼び出したいところに{{% ショートコード名 %}}と書くと、ビルド時にそのコードが出力される

e.g.

code:layouts/shortcodes/link.html

<a href="{{ .Get "href" }}" class="aaa bbb ccc">{{ .Get "title" }}</a>

というショートコードを置いておいて、呼び出すときに

code:content/post/001.md

ここが{{% link href="https://hogehoge/" title="リンク" %}}になるよ〜

と書くと、ビルドしたときにこうなる:

code:post/001.html

ここが<a href="https://hogehoge/" class="aaa bbb ccc">リンク</a>になるよ〜

べんり〜！最高！

WordPressをちょこっとだけ勉強してた頃からショートコードの存在自体は知っていたけど、やっとその良さを真に理解できた気がする。

TextExpanderやDash、その他開発用エディタのスニペットみたいな感覚で使えるんだな。

サイト外へのリンクのときだけa要素にtarget=_blankを足すやつ、今はjQueryでやってるんだけど、ショートコードで書き分けてもいいのかも🤔

自分のサイトの規模ならたいした手間じゃないし。