Hugo に Google Adsense を追加する
前提
Google Adsenseの設定は終わっているものとする。
参考
- https://www.godo.dev/tutorials/hugo-in-article-ad/
- https://stackoverflow.com/questions/63132807/hugo-use-inline-javascript-within-posts
導入
layouts/partials/adsense-inarticle.html
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client={{.Site.Params.Adsense.client}}"
crossorigin="anonymous"></script>
<!-- example.org_728x90 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="{{.Site.Params.Adsense.client}}"
data-ad-slot="{{.Site.Params.Adsense.inArticleSlot}}"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
config.toml
[params.adsense]
client = "ca-pub-12345" # 適切な値に変更
inArticleSlot = "12345" # 適切な値に変更
# 以下を入れない場合 <script> がレンダリングされず
# 代わりに <!-- raw HTML omitted --> というコメントが出力される
# goldmark は hugo(>=0.60)のデフォルトの markdown レンダラ
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
layouts/_default/single.html
<div class="post-content">
{{ if or .Params.Toc $.Site.Params.Toc }}
{{ if ne .Params.Toc false }}
<h2>Table of Contents</h2>
<aside class="table-of-contents">{{ .TableOfContents }}</aside>
{{ end }}
{{ end }}
<!-- {{ .Content }} を下記に書き換える -->
{{ replace .Content "<!--adsense-->" (partial "adsense-inarticle.html" .) | safeHTML }}
</div>
Read other posts