shou.com
JP / EN

HugoのShortcodeを使ってアフィリエイトリンクを作成する

Sat Jun 22, 2024
Sat Jun 22, 2024

前もHugoのShortcodeを使ってアフィリエイトリンクを作成していたのですが、ブログを若干リニューアルした際にアフェリエイトの管理方法も変更しました。というか、こっちの方が断然いい!

昔の記事ですが、参考までに。あまり参考にならないかもしれませんが。

HugoでAmazonアフェリエイトとかのShortcodeを作った

新しい方法

今までは商品ごとにShortcodeを作成していたのですが、今回は一つのShortcodeで管理することにしました。個別のデータはHugoのDataを使って管理します。

このようにShortcodeにdataの値を渡してあげることで、商品ごとにリンクを作成することができます。

{{< affiliate dataPath="isbn4480432930" >}}

ざっくりした流れとしては、まず。

  1. shortcodeのaffiliate.htmlを作成
  2. dataの値をセット
  3. shortcode(affiliate.html)にdataの値を渡す
  4. shortcode(affiliate.html)内でdataの値を参照
  5. 表示される!

shortcodeに引数を渡す

shortcodeに引数を渡すにはGetを使います。あとは、それを値にセットしてあげればOKです。

1
2
3
4
5
{{ $dataPath := .Get "dataPath" }}
{{ $data := index .Site.Data.affiliates $dataPath }}
<div>
  {{ $data.Title }}>
</div>

ここのdataPathはHugoのDataをセットしてあるパスが入っています。これを使って、Dataの値を取得しています。

前の方法に比べると格段に楽になりました。商品を追加する際も、Dataに値を追加するだけでOKです。なんで今までこんなに面倒な方法を取っていたのかと思うくらいです。

で、実際に使うとこんな感じです。

横井軍平ゲーム館

See Also