Hugo v0.20がリリースされました!

そしてこのバージョンからOutput Formatsという機能を搭載され、AMPなどフォーマットの異なるファイルを吐き出すのが容易になりました。

Hugo - Output Formats

Output Formatsを使う

僕の公開しているテーマの中に、AMP対応をしたくてもできなかったテーマがあるので、 せっかくだしこのタイミングでAMP対応してみようと思います。

config.toml、またはfrontmatterにoutputsを追加する

Output Formatsを使うためには、異なるフォーマットを出力する対象となるページを指定する必要があります。

config.tomlに書く場合は、page, home, section, taxonomy, taxonomyTermといった区分で設定ができます。 とりあえず今回はpageのみAMP対応をしてみます。

[outputs]
home = [ "HTML", "AMP", "RSS"]
page = [ "HTML"]

各ドキュメントのfrontmatterに設定する場合は、こんな感じ。

---
date: "2016-03-19"
outputs:
- html
- amp
- json
---

layouts/xxx.amp.htmlを作る

次にレイアウトファイルの対応。 僕のテーマで対応が必要だったのは以下のファイルでした。

  • layouts/_default/baseof.amp.html
  • layouts/_default/single.amp.html
  • layouts/shortcodes/*.amp.html

Shortcodesも対応できるのがとてもいいですね、AMPなんてamp-imgが使えないと元も子もないので・・・。

ちなみにv0.20からBlock Templateの機能もさらに強力になりました!

Hugo - Block Templates

Output Formats Shallow Dive

Output Formatsは別にAMP専用の機能じゃないので、せっかくだしOutput Formatsでできる他のことも見てみます。

AlternativeOutputFormats

今回の修正で、PageがAlternativeOutputFormatsという配列を持つようになりました。

この配列には生成対象になるOutput Formatsが格納されるので、例えば通常ページからAMPページへのrelをlinkが手軽に作れます。

{{ range .AlternativeOutputFormats }}
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
{{ end }}

JSONをOutput Formatsで扱う

僕がOutput Formatsで気に入ってるのは、JSONを吐き出せるってところ。 これがあれば簡易的にAPI用のエンドポイントを作ったりできそう。

Google Analyticsのテンプレートはだめそう

Hugoはembedded_templateとしてGoogle AnalyticsやDisqusのテンプレートが含まれているんですが、 これは標準のものしかないので、AMP対応する場合はちゃんと自分でjsを書かなきゃだめそう。

確かにAMPを特別扱いしてembedded_templateに追加するのも微妙な話なので、これはこれでいいかなと。

対応したのがこのテーマ

今回対応したテーマがこちら。

dim0627/hugo_theme_robust

恐れ多いことにHugoの公式ドキュメントにあるチュートリアルでこのテーマを使ってくれてるようで、やけにForkされます。

このテーマも、今回の対応でv0.20より前のバージョンをサポートできなくなったわけでもないので、とても柔軟性のあるリリースだと思います!

これまでは通常用のテーマとAMP用のテーマを個別に作ってたのですが、今後は1テーマでどちらも対応できますね。 静的サイトジェネレータだともうHugo択一感あります。

このブログもレガシーな方法でAMP対応をしてるので、気が向いたらOutput Formatsに移行したいところ。