shortcodesを使用する

shortcodesとは

mdファイルの中で使用できる小さなテンプレートのようなものが用意されています。

HUGOの組み込みのshortcodesには、下記のようなものがあります。(自分が使用しそうなものだけ抜粋しています)

HUGOのショートコード

カスタムショートコードを作成する

引用のためのショートコードを"cited"という名前で作成します。

ショートコードのテンプレート

layouts/shortcodes/ 配下にテンプレートを作成します。

1
2
3
4
5
6
<b class="cited">{{.Inner}}</b>
{{ if and (isset $.Params "from") (isset $.Params "link") }}
<br/><small><a href="{{.Get "link"}}" target="_blank">{{.Get "from"}}</a></small>
{{ else if (isset $.Params "from")}}
<br/><small>{{.Get "from"}}</small>
{{ end }}

mdファイル内で使用する

生成されたコード

HTML

ブラウザで確認

スタイル(参考)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.cited {
  &::before {
    font-size: 2rem;
    content: "\201C";
  }
  &::after {
    font-size: 2rem;
    content: "\201D";
  }
}

リンク

HUGOカスタムショートコード

Last Mod: Jan 7, 2020