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も簡単に指定できるようになってて便利です