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

今までは、こんな感じでアマゾンアフェリエイトをベタ張りしていました。

しかし、この頃はアマゾンアフェリエイトからも小学生のお小遣い程度は稼げるようになったので、Amazonアフェリエイト楽天アフェリエイトhontoアフェリエイトのhugo用Shortcodeを作ってみました。

Amazonアフェリエイトとかのhugo用Shortcodeはどんなものがあるのかググってみましたが、apiを作ってゴニョゴニョしなくていけないものが多く、ちょっとオーバースペック気味だったのと、この対応だと楽天アフェリエイトhontoアフェリエイトには対応できないので、apiを自前で実装するのは諦めました。できれば、楽天ユーザーやhontoユーザーの取りこぼしも防ぎたい!!!

んで、考えた方法が、HugoのData Templateを使う方法。

構成は超単純。

アフェリエイト用のShortcodeのlayoutを独自で作って、そこからData Templateにあるアフェリエイトのリンクを参照するというもの。

これならapiを作るよりも単純で、なおかつ複数のアフェリエイトにも対応できる。





Shortcodeのレイアウトを作る


まずは、Shortcodeのレイアウトを作ります。

僕の場合は、layouts配下にshortcodes/buyフォルダを作成し、その中にアフェリエイト用レイアウトを作成しました。こんな感じで。

<div class="buy-box">
  <div class="item-image">
    
  </div>
  <div class="item-details">
    <span class="title">
      <a href="{{.Site.Data.buy.Sample.Amazon}}" target="_blank">
        {{.Site.Data.buy.Sample.Title}}
      </a>
    </span>
    <a class="amazon-link" href="{{.Site.Data.buy.Sample.Amazon}}" target="_blank">
      Amazon
    </a>
    <a class="rakuten-link" href="{{.Site.Data.buy.Sample.Rakuten}}" target="_blank">
      楽天
    </a>
    <a class="honto-link" href="{{.Site.Data.buy.Sample.Honto}}" target="_blank">
      honto
    </a>
  </div>
</div>

hugoは独自でカスタム用のcssが適用できるので、custom.cssにアフェリエイトのデザインを作成します。

/* --------------------------------
 * shortcodeのデザイン
 * -------------------------------- */
 .buy-box {
    display: grid;
    grid-template-columns: 
        1fr 1fr;
    border: 4px solid #DCDCDC;
    padding: 2%;
 }
 .item-image {
     grid-column: 1;
 }
 .item-details {
     grid-column: 2;
     display: flex;
     flex-direction: column;
     padding: 2%;
 }
.item-details .title {
    margin-bottom: 5%;
}

.buy-box .item-details .title a {
    color: black;
    font-weight: bold;
}
.buy-box .item-details .amazon-link,
.buy-box .item-details .rakuten-link,
.buy-box .item-details .honto-link,
.buy-box .item-details .matsumotokiyoshi-link{
    padding: 2%;
    border-radius: 50px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 5%;
    width: 80%;
}
 .buy-box .item-details .amazon-link {
    background-color: #FF773E;
}
 .buy-box .item-details .rakuten-link {
    background-color: #FF4F50;
}
.buy-box .item-details .honto-link {
    background-color: #5D99FF;
}
.buy-box .item-details .matsumotokiyoshi-link {
    background-color: #000000;
}

これで、デザイン部分は終わりです。





Data Templateを作る


先ほど作成したレイアウトの{{.Site.Data.buy.Sample.Amazon}}がData Templateにあるアフェリエイトリンクを読みに行くので、これに合わせたData Templateを作ります。作ると言っても超簡単。

僕の場合は、data/buyという構成の下のtomlファイルを作って、こんな感じにしてます。

Title = ""
Amazon = ""
Rakuten = ""
Honto = ""

あとは、ここにアフェリエイト用のリンクを貼り付ければok。僕の場合はタイトルも参照できるようにしてます。

これで完成。

あとは記事に参照したい先のアフェリエイト {{< buy/book4532197333 >}}を貼りつければこんな風に表示されます。

ただしこの方法だと、商品が増えるたんびにdataとlayoutを作らなくてはいけないで、ちょっと面倒です。

なので、僕はサンプルの雛形を作って、それを毎回コピペするとう方法をとってなんとかしてます。毎日ブログで商品を紹介する訳ではないので、今のところ大丈夫。

cp data/buy/Sample.toml data/buy/
cp layouts/shortcodes/buy/sample.html  layouts/shortcodes/buy/

See Also