HugoでAmazonの商品紹介用のShortcodesを作ってみた
HugoにはShortcodesという独自のsnippetを作る機能があります。 Markdownに独自タグを追加できるような感じですね。
TwitterやYouTube、GitHub gistsあたりが組み込みで用意されているだけでなく、独自のShortcodesを作ることもできます。 今回はAmazonの商品紹介をするShortcodesを作ってみました。
layouts\shortcodesの中にamazon_shortcodes.htmlという名前でファイルを配置しておきます。ソースコードは長くなるので後述。
あとはmarkdownの中に
{{% amazon_shortcodes B00UAAK07S %}}
と書けば
といった風に表示されます。
ShortcodesはHTMLにGo Template Primerを組み合わせて書きます。自分はGoに馴染みがないのでTemplateの書き方に面喰いましたが、見よう見まねでなんとかなるレベルです。
また、HugoにはDynamic Contentと呼ばれる動的コンテンツを扱う仕組みがあります。 今回はその中のgetJSONを使いました。ローカルのファイル or URLからJSONを取得する関数です。
残念ながらAmazonの商品情報をJSONで返してくれる都合のいいサービスは見つからなかったので、前に書いた記事のように自前で拵えます。自分はPHPで作りましたが、いまっぽくするならAmazon Lambda + API Gatewayとかなんですかね。
ちなみにこのgetJSONはURLから取得した結果をローカルにキャッシュします。キャッシュは標準だと$TMPDIR/hugo_cache/に格納されています。 サーバー側のJSONを返す側と同時並行で作っていたので、JSON定義を変えても反映されなくてハマってしまいました。なんか変だなーと思ったらキャッシュを消してみましょう。
ソースコードはこんな感じです。 2行目で引数に指定したASINを取得し、3行目でASINから商品情報のJSONを取得しています。 あとはJSONから必要な情報を引っ張り出してきてHTMLに当て込んでいくだけ。
とても手軽に作れるので、markdownの中にHTML直接書きたくないなあ、という人は積極的にShortcodes化しちゃいましょう。
関連(するかもしれない)記事
おススメ