Hugo の Tips ： Amazon 商品用のブログカード

はじめに

Hugoでわりと楽してわりとかっこよくAmazon商品紹介をする - ゆーすけべー日記 に、Amazon で販売されている商品を「ブログカード」風に表示する方法があったので、参考にした。

shortcode を貼り付ける用のブックマークレット

上記のサイトを参考に、Amazon の商品ページで実行することで、shortcode をクリップボードにコピーするブックマークレットも作った。JavaScript は次のような感じ。

javascript: (function() {
  var a = document.getElementById("productTitle").textContent;
  var b = document.URL.match("(dp|product)/([0-9a-zA-Z]{10})")[2];
  var c = '{{< amazon asin="' + b + '" title="' + a.trim() + '" >}}';
  navigator.clipboard.writeText(c).then (
    () => { window.alert('Coppied:\n'+c) }
  );
})();

ブックマークレット用に変換したものは下記。

Amazon の商品ページでブックマークレットをクリック。次のような shortcode を Markdown ファイルに貼り付けると、商品へのリンクをブログカード形式で貼り付けることができる。

{{< amazon asin="B01EJ7AK5O" title="鬼滅の刃１（ジャンプコミックスDIGITAL）" >}}