kanta's spike

テーマを利用すると、サイトのassetsディレクトリにアクセスができなくなるため、 テーマのassetsディレクトリにJavaScriptを配置しなければならない。

記事専用のJavaScriptは、テーマのアセットではなくサイトのアセットに配置したい。

解決策

Theme Componentsのドキュメントには以下の記述がある。

- For `i18n` and `data` files, Hugo merges deeply using the translation ID and data key inside the files.
- For `static`, `layouts` (templates), and `archetypes` files, these are merged on file level. So the left-most file will be chosen.

サイトやテーマ(複数可)の、i18nやdata内のファイルの内容やstatic, layouts, archetypesディレクトリのファイルはマージされるようだ。 しかし、assetsディレクトリについては記載がなく、テーマのassetsディレクトリのみ採用されるようだ。 ¹

テーマのアセットとサイトのアセットを併用するためには、Hugoのマウント機能を利用すれば良さそうだ。

今回の場合、以下の設定によりテーマのアセットとサイトのアセットを併用可能になる。

• 記事専用のアセットは サイトの物理ディレクトリ assets/sampleに格納

• サイトの物理ディレクトリ assets/sampleを、仮想ディレクトリ assets ² 配下にarticleという名前でマウント ³

  # hugo.toml(or config.toml)
  # ...略...
  [module]
  # ...略...
  # マウント設定
  [[module.mounts]]
    source = 'assets/sample'  # サイトの物理ディレクトリ(`assets/sample`)を
    target = 'assets/article' # 仮想ディレクトリ`assets`配下に`article`という名前でマウントする
  # ...略...
  

これにより、resources.Get "article/xxx.js"で取得するJavaScriptファイルは、サイトのassetsから取得できるようになる。

一方、resources.Get "js/xxx.js"のように取得すると、従来通りテーマのassetsから取得できる。

参考

• Theme Components | Hugo
• Configure Modules | Hugo