beta

HUGOでPartialやShortcodeの処理をアウトプットフォーマットごとに変える

HUGOでPartialやShortcodeの中身をアウトプットフォーマットに合わせて変更させる方法がわからなかったので、探してみました。

公開日:2019年11月3日

アウトプットごとのファイルを用意するだけ

最初は、テンプレート内で「isHTML」とか「Outputs」などのアウトプットフォーマットの変数を持っているのかと思っていましたが、そういった値は持っていません。

やり方は単純で、

アウトプットフォーマットごとにファイルを用意するだけ

です。テンプレートと同じルールなんですね。

HUGOのドキュメントにも、下の方にですが書いてありました。

Custom Output Formats

Hugo will look for the name given, so you can name it whatever you want. But if you want it treated as plain text, you should use the file suffix and, if needed, the name of the Output Format. The pattern is as follows:

[partial name].[OutputFormat].[suffix]

ファイルの命名規則

headerというパーシャルがあった場合、テンプレート内では、

{{ partial "header" . }}

として呼び出しますが、jsonフォーマットの時は「header.json」、CSVなら「header.csv」という感じで各フォーマット用のファイルを用意すればOKです。

同じことがショートコードにも適用されます。

逆に、

{{ partial "header.csv" . }}

として、あえて違うフォーマットのパーシャルやショートコードを呼び出すこともできるようです。

partialを内包している場合

partialを使っている場合、partialの中でpartialを使うケースもあると思います。

例えば、「header」パーシャルの中で「title-img」パーシャルを呼び出すといったケースです。

このケースで、画像を、HTMLフォーマットの時は「<amp-img>」タグで囲って、JSONフォーマット時は「<img>」にしたいということがあると思いますが、例え、変更があるのが「title-img」パーシャルだけだったとしても、「header」パーシャルにもJSONのテンプレートが必要です。

というのも、HUGOのテンプレートの呼び出しは、

  • header.jsonを探す -> なかったらheader.htmlを探す
  • header.htmlはHTMLパーシャルなので、title-imgもHTMLパーシャルであるtitle-img.htmlを読む

という順番になるからです。


HUGOでアウトプットフォーマットごとにPartialやShortcodeの処理を変える方法を見てきました。

一度ルールがわかってしまえば簡単ですね。