やりたいこと
Hugoのテンプレートで、 静的ファイルに対して、キャッシュバスティングを行う方法です。
注意
(2018-07-06)以下のコードがマージされたので、 おそらく0.43から有効になるfingerprintを使うのが良いと思います。
注意2
以下の情報は古く、今は使っていません。 今は、Netlifyで自動的に処理するのを採用しています。
前提条件
- 設定パラメータ
publishDirを変更していないこと。- 変更しても原理的には対応可能です。
手順
- ファイルのパス(static以下):
(readFile (print "/public/" "css/style.css" ))
出力ディレクトリのデフォルトである、"public"を指定しています。
このため、publishDirを変更している場合は使えません。
逆に言えば、publishDirにあわせて変更する、
もしくは設定を取得すれば使用可能です。
public以下を指定する理由
staticディレクトリ以下のファイルを指定する場合、 テンプレートのファイル上書き機能に対応できないからです。
制限事項
だいたいはこれでうまくいくのですが、
新規ファイルを追加した状態でhugo serveを実行すると、ファイルがないとエラーになってしまいます。
一旦hugoコマンドを実行すると、正常に動作します1。
また、環境によっては動かないことがあるようです。 原因は分かりません。
例
例えば、CSSファイルの場合は、 以下のようなpartialテンプレートを作成しています2。
<link rel="stylesheet" href="{{ (print . "?" (readFile (print "/public/" .) | md5)) | relURL }}" />{{ "" -}}
このときに、以下のように呼び出すと、
<link rel="stylesheet" href="/css/style.css?9f99fa23ec28f847205c56f75b45fc65" />のように変換されます。
{{ partial "link-css" "css/style.css" }}
partialCached推奨
ただし、上の設定だとビルドが遅くなるため、以下のように、partialCachedを使って、キャッシュしてください。
{{ partialCached "link-css" "css/style.css" "style.css" }}
- 新規ファイルを追加するケースはあんまりないので、公式にサポートするまではこれで乗り切るしか無いですね。 [return]
- 最後の
{{ "" -}}は、改行を取るための手法です。参考→出力されるHTMLを整形する [return]