HUGOでPartialやShortcodeの処理をアウトプットフォーマットごとに変える
HUGOでPartialやShortcodeの中身をアウトプットフォーマットに合わせて変更させる方法がわからなかったので、探してみました。
公開日:2019年11月3日
アウトプットごとのファイルを用意するだけ
最初は、テンプレート内で「isHTML」とか「Outputs」などのアウトプットフォーマットの変数を持っているのかと思っていましたが、そういった値は持っていません。
やり方は単純で、
アウトプットフォーマットごとにファイルを用意するだけ
です。テンプレートと同じルールなんですね。
HUGOのドキュメントにも、下の方にですが書いてありました。
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の処理を変える方法を見てきました。
一度ルールがわかってしまえば簡単ですね。
新着ノート
-
NUXT3
公開日:2023年2月16日
-
NUXT3
公開日:2023年1月30日
新着コード
-
Vue.js
公開日:2022年4月18日
-
Vue.js
公開日:2022年4月13日