Adsense

Hugo 載入 Adsense 廣告，讓你的創作可以獲得收益
Categories:
Tags:

建立廣告樣板

在客製化樣板中建立 layouts/partials/adsense-in-article.html 廣告樣板

{{ if .Site.Params.adsense.client }}
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <!-- 廣告 -->
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="{{.Site.Params.adsense.client}}"
       data-ad-slot="{{.Site.Params.adsense.slot}}"
       data-ad-format="auto"
       data-full-width-responsive="true"></ins>
  <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
{{ end }}

設定廣告代碼

在 config.toml 檔案中設定您的廣告代碼

# 廣告
[params.adsense]
  client = "ca-pub-1990193713845546"
  slot = "8247872484"

文章內文廣告

文章內文指定位置加入廣告

This is the first paragraph.

This is the second paragraph.

<!--adsense-->

This is the third paragraph.

解析文章內文塞入廣告

{{ replace .Content "<!--adsense-->" (partial "adsense-in-article.html" .) | safeHTML }}

在 config.yaml 檔案中必須要設定允許解析出現 html 語法，這樣廣告代碼才能夠正常的被解析塞入

# config.toml
[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

# config.yaml
markup:
    goldmark:
        renderer:
            unsafe: true

這樣就可以看到文章內文有放入指定的廣告了

文章置頂置底加入廣告

建立廣告樣板

在客製化樣板中建立 layouts/partials/adsense-article-top.html 及 layouts/partials/adsense-article-bottom.html 廣告樣板

設定文章內文廣告樣板

在文章內文顯示的上下方直接載入廣告樣板即可

<!-- 置頂廣告 -->
{{ partial "partials/adsense-article-top.html" . }}

{{ replace .Content "<!--adsense-->" (partial "adsense-in-article.html" .) | safeHTML }}

<!-- 置底廣告 -->
{{ partial "partials/adsense-article-bottom.html" . }}

參考資料