普通のリンクでブログを運用していたのですが、amazonのアフィリエイトを登録してみたので、amazonの商品リンクくらいはちゃんとした見た目にしようと思いました。Hugoには簡単に定形のhtmlを埋め込める便利な機能があるので、それを使ってamazonの商品リンクを作りました。
amazon.html
amazon.htmlを作って書いて行きます。呼び出す毎に、値を入れられるように、urlなどのところは{{ GET "バラメータ名"}}といった感じで書いて行きます。
見た目は適当に見たことあるような感じにしました。
<div class="amazon-box">
<div class="three columns amazon-image">
<a href="{{ .Get "url" }}" target="_blank">
<img border="0" src="{{ .Get "imageUrl" }}">
</a>
</div>
<div class="nine columns amazon-info">
<a href="{{ .Get "url" }}">
<p class="amazon-name" target="_blank">{{ .Get "title" }}</p>
</a>
<div>{{ .Get "summary" }} <br />
</div>
<button href="{{ .Get "url" }}" class="amazon-button">amazonで購入する</button>
</div>
</div>
上のようにShortcodesを作ったら、記事の中で下のような感じで値を渡すと商品リンクを貼ることができます。
{{＜amazon
url=""
title=""
summary=""
imageUrl=""
＞}}
下のような見た目になりました。
Shortcodesを使ったのは初めてだったのですが、かなり便利だったので、時間があればいろいろ試して見てもいいと思いました。
参考
HugoのShortcodesを自作してみる - A1 Blog
