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本体で考えて欲しいところだなぁ。