Hugoには他のCMSではよくある、機能を拡張するためのプラグインを提供する仕組みがない。
このため、あるテーマの中に便利なショートコードがあったとして、それを別のテーマで使用しようとした場合、
- テーマディレクトリ/layouts/shortcodes配下のショートコードのソースを、別のテーマの/layouts/shortcodes配下、またはルート配下の/layouts/shortcodesへコピーする
- ショートコードにスタイルが設定されている場合、スタイルシートの中から必要な部分を抜き出し、別のテーマのスタイルシートへコピーする
という煩雑な手順が必要となるが、先日、以下のショートコードのインストール手順を読んでいたら、うまい方法でショートコードを提供していた。
まずショートコードのコードをテーマディレクトリ配下へcloneする。その後、config.tomlでテーマを以下のように指定する。
theme = ["your-main-theme", "hugo-shortcode-gallery"]
そもそもテーマを複数指定できることを知らなかったが、この設定によりyour-main-theme
テーマに加えhugo-shortcode-gallery
テーマも参照されることになる。
そして、hugo-shortcode-gallery
配下は以下のようなファイル構成になっている。
hugo-shortcode-gallery
├── LICENSE.md
├── README.md
├── assets
│ └── shortcode-gallery
│ ├── filterbar.sass
│ └── font-awesome
│ ├── compress-alt-solid.svg
│ ├── expand-alt-solid.svg
│ └── license.txt
├── config.toml
├── layouts
│ └── shortcodes
│ └── gallery.html
└── static
└── shortcode-gallery
├── jquery-3.7.0.min.js
├── justified_gallery
│ ├── LICENSE
│ ├── jquery.justifiedGallery.js
│ ├── jquery.justifiedGallery.min.js
│ ├── justifiedGallery.css
│ └── justifiedGallery.min.css
├── lazy
│ ├── jquery.lazy.js
│ └── jquery.lazy.min.js
└── swipebox
├── css
│ ├── swipebox.css
│ └── swipebox.min.css
├── img
│ ├── icons.png
│ ├── icons.svg
│ └── loader.gif
└── js
├── jquery.swipebox.js
└── jquery.swipebox.min.js
14 directories, 23 files
テーマと言ってもlayouts配下にあるのはショートコードのみである。そしてassetsとstaticディレクトリ配下にショートコードで使用するファイルだけを置くというのは、汎用的にショートコードを提供する方法として手軽で良いと思った。
ただ、この方法だとネームスペースやJavascriptが競合する可能性がありそうなので、やはりHugo本体で考えて欲しいところだなぁ。