Hugo・Markdownの文中にShortcodeを使って広告を貼り付けてみた

はじめてShortcodeを書いたので記録として。

面倒くさそうで手をつけてなかったけど、やってみたら結構簡単でした

そもそもShortcodeとは

予め作成しておいたコードスニペットを呼び出せるソレ
Shortcodes | Hugo

例えば試しに……

/layouts/shortcodes/hr.html

<hr{{ if .Get "c" }} class="{{ .Get "c" }}"{{ end }}>

というファイルを作っておいて、Markdown中に次のように記載

{{% hr c=“hoge” %}}

すると、タグが展開されて次のようになる

<hr class="hoge">

classが入ってたら…とか考えなければ超簡単

/layouts/shortcodes/以下の ファイル名 をキーにコードを引っ張ってくるだけなので
同ディレクトリ内に ad.html とか設置してやって、こんな感じの広告タグを書いておく

/layouts/shortcodes/ad.html

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

実際に呼び出す時には、Markdown中にさっきのように記載をする

{{% ad %}}

ifだ何だとか気にしなくても、繰り返し書くであろうコードを書いておくだけでも便利ですね

コードサンプルとして

採用しているHugoのテーマ Robust には、こんな感じのShortcodesが置いてあります

<figure{{ if .Get "class" }} class="{{ .Get "class" }}"{{ end }}>
  <img src="{{ $.Site.BaseURL }}{{ .Get "src" }}" alt="{{ .Get "caption" }}"{{ with (.Get "w") }} width="{{ . }}"{{ end }}{{ with (.Get "h") }} height="{{ . }}"{{ end }}>
  {{ if .Get "caption" }}
  <figcaption>
    {{ if .Get "href" }}
    <a href="{{ .Get "href" }}" target="_blank">{{ .Get "caption" }}</a>
    {{ else }}
    {{ .Get "caption" }}
    {{ end }}
  </figcaption>
  {{ end }}
</figure>

画像の src はもちろん、widthやheightも簡単に指定できるようになってて便利です