Hugoでdetailsタグを使う方法

概要

一言で終わる概要ですが、記載します。

結論、「Hugo公式ドキュメントに記載の方法を使うだけでOK」です。

公式ドキュメント：https://gohugo.io/shortcodes/details/

以下のように記載することで、detailsタグを利用できます。

{{< details summary="See the details" >}}
This is a **bold** word.
{{< /details >}}

例

See the details

This is a bold word.

他のブログ等でShortcodesを自作して入れるものが多いですが、Hugoのv0.14.0以降は上記の記載だけで導入できます。カスタマイズはHugoのlayoutsを利用したり、CSSのスタイリングを変更したりといった方法で行うことができます。

他にも、ShortcodesはHugo公式ドキュメントに記載されていて、以前よりも充実していると思います。

ぜひ参考にしてみてください。