Themeを使いつつHugoでhtmlを追加する方法

HugoでThemeを利用しているときに、ThemeでGoogle Analyticsの設定が用意されていなかったときや、 オリジナルのheader、footerを追加したいときなどにhtmlを修正したくなることがあると思います。 そのようなときにどのように対応できるか調べた限りいくつか方法がありました。

  1. Theme上のlayoutsを編集する
  2. Theme上のlayouts内のファイルを、hugoのrootパスのlayoutsディレクトリに同じ階層で配置して改修する（参考）
  3. 改修したい内容のThemeを追加して２つのThemeを参照するように変更(参考)

方法1 Theme上のlayoutsを編集する

ネットで方法を検索すると1のThemeのlayoutsを編集するのが多かった印象です（この印象は主観的です）。 この方法でできないか最初考えたのですが、Themeの更新があったときに簡単に更新できるようにしたく、submoduleでThemeを管理したいために1の方法は断念しました。

Docのディレクトリ構造を見ていない方は要チェック！

Themeを編集しないで改修できない方法がないかと考えました。 次の話に進む前にもしHugoのDocを見たことがない場合は、そちらを先にみることをおすすめします。 基本的なディレクトリ構造を理解していることが重要です。私は横着して見ておらず、 調べている途中でDocを見てから理解したので最初にディレクトリ構造を理解しておいたほうがよかったと思いました…。 ディレクトリ構造についてはこちらに記載があります。

このディレクトリ構造を理解した前提で話を進めます。

方法2 Theme上のlayouts内のファイルを、hugoのrootパスのlayoutsディレクトリに同じ階層で配置して改修する

方法1ではTheme上のlayoutsを直接編集していました。方法2ではthemes内のlayoutsにあるファイルをlayouts以下の階層構造をそのまま維持して、 hugoのrootパス配下のlayoutsにファイルを配置して上書きする方法です。 このときに同じ階層を作ることに注意してください。私は何度かスペルミスをしてなぜ動かないのか無駄に時間をかけてしまいました…。

Themeのファイルをコピーして上書きすると同じ階層に同じファイル名のファイルがあった場合は、 Theme上のlayoutsのファイルではなくて、Hugo rootパスのlayouts内のファイルを参照するという仕組みになっていますので そちらを参照することができます。

この方法でもよかったのですが、実際私の場合はhugo-theme-stackを利用しており、 その中のthemes/hugo-theme-stack/layouts/partials/head/head.html を確認するとcustom.htmlを参照していることを確認でき、 custom.htmlの中身を確認したところ空ファイルだったのでこれを利用することにしました。

Hugoのrootパスでlayouts/partials/head/custom.htmlを作成し、デフォルトのテーマから変更したいhtmlの記載を記載すると反映することができます。 head.htmlをそのまま修正することでも反映は可能かもしれないですが、Themeディレクトリのhead.htmlは残っているので できるだけコードの全体量を少なくしたいという観点からcustom.htmlを使うことにしました（そこまで影響はないと思いますので好みかと思います）。

方法3 改修したい内容のThemeを追加して２つのThemeを参照するように変更

こちらは今回検証はしなかったのですがHugoの質問サイトで記載があったので備忘録として記載します。 採用したThemeとは別のオリジナルThemeを採用し、その中に改修したいファイルを追加するなどして サイト全体を改修するという方針です。

2つのテーマを使う方法はこちらです。 themes: [“originaltheme”, “mytheme”].

右側のThemeにあるファイルが左にあるThemeをすべて上書きするようです。 実際に確認はしていないのでこの方法を利用されるときは注意してください。

参考：https://discourse.gohugo.io/t/is-it-possible-to-append-to-a-theme-partial/26004/2

まとめ

教訓：HugoのDocはちゃんと見るようにします…

参考

https://gohugo.io/getting-started/directory-structure/

https://discourse.gohugo.io/t/how-do-you-add-a-script-into-the-head/10882

https://discourse.gohugo.io/t/is-it-possible-to-append-to-a-theme-partial/26004/3

https://github.com/CaiJimmy/hugo-theme-stack/