Hugo靜態站點接入Adsense廣告
Hugo 生成的靜態站點要接入 Google Adsense 廣告，方法如下：
接入全站自動廣告
Adsense 廣告分爲全站廣告(By site)和單元廣告(By ad unit)。
如果想簡單接入，不定製廣告的類型，建議接入全站自動廣告，不操心，完全信任 Google
-
先去 Adsense 後臺，把自動展示廣告的代碼複製到
/xxx/layouts/partials/google/ads.html
xxx 是你網站的根目錄，ads.html 是定義的文件名，裏面粘貼上自動廣告代碼。 放在這個路徑下，好處是：萬一某一天你需要換個 theme，文件還在，完全不受影響。 形如：
1<script
2 async
3 src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx"
4 crossorigin="anonymous"
5></script>
根據 Google 要求，廣告代碼是要放到 <head></head> 標籤間的。
所以需要放在 themes 的相關地方，比如我使用的這個皮膚(每種皮膚路徑不一定相同，要自己琢磨下)，路徑爲：
xxx/themes/hugo-clarity/layouts/partials/head.html
ads 爲上面 ads.html 的文件名：
1<!-- ads -->
2{{ partial "google/ads" . }}
這樣全站自動廣告就接入完成了，Adsense 會自動處理剩下的事情，包括在哪些頁面的什麼位置展示什麼樣的廣告，還是很方便的。
接入自定義廣告單元
人們總是喜歡自定義，By site 廣告和 By ad unit 並不衝突。不完全信任 Google 也沒錯，比如你寫的某個文章，你認爲在 A 位置插入廣告非常合適，B 位置就不行，此時自定義單元廣告就派上用場啦。這個時候 Google 自動分配廣告的算法不一定行。
- 按照 Adsense 指引，創建 4 種自定義廣告單元
-
每種廣告單元對應創建一個 hugo shortcodes
類似全站自動廣告，把對應的廣告單元代碼分別放到 shortcodes 文件中。點圖示地方獲取單元廣告代碼
複製後，粘貼到對應文件中，如下圖所示：
-
在 content 的 md 文件中引入對應的
shotcodes例如， 文章開頭添加廣告
文章末尾添加廣告
當然文章中間也可以添加，每種廣告單元適合的位置不一樣，名字按照自己喜好取。
這樣，自定義廣告單元也設置好了，可能別人有更加方便的方式，個人覺得不頻繁變動也夠用。
只是挨個文章添加廣告有點費力，也許這就是自定義的樂趣，通常我給文章開頭一個 adsense-header， 結尾一個 adsense-footer，中間看情況給一個 adsense-emb。再多用戶不高興，Google 也不答應，要考慮下用戶體驗。
接入自定義信息流廣告
自定義信息流廣告接入有門檻和特殊要求，一定要放到 feed 中才行，值得單獨說下。所謂 feed 流可以簡單想象爲一個 for 循環，比如本站的首頁，有 N 個文章簡介塊組成，信息流廣告模仿你文章塊的樣式，提供更好的用戶體驗，在用戶瀏覽的時候自然出現，與網站的外觀和風渾然一體，非常適合移動設備，好比生物世界的保護色和擬態^_^
下面介紹接入過程
- 先找到循環所在的模板
我是通過網頁源碼定位，通過搜索 css 類關鍵字找到的，每個 hugo theme 的 feed 流模板位置不一樣。hugo-clarity 的位置。
xxx/themes/hugo-clarity/layouts/partials/archive.html
- 修改信息流模板文件
1 {{- range $pageindex,$pagevalue := (.Paginate $pages).Pages }}
2 {{if and ($pageindex) (modBool $pageindex 3)}}
3 <!-- ads feed -->
4 {{ partial "google/adsense-feed" . }}
5 {{end}}
6 ...此處省略其它代碼塊
7 {{end}}
代碼解釋，range 後接入數組，$pageindex, $pagevalue 分別爲 index，value，if 判斷 index 爲真 且 對 3 取模運算後爲真。假設每頁 10 個文章，3、6、9 的地方都會插入 feed 流廣告。modBool 這個模板函數 index 爲 0 的時候也爲真，所以要排除下，不然用戶看到的第一個就是廣告，還怎麼僞裝 🥸。當然用戶也可以更改 3 爲其它數字，看自己意願要展示多少廣告，多了影響用戶體驗和網站性能。
至於這個 adsense-feed.html 模板文件放在什麼位置，參考全站廣告接入部分。
綜上所述，全站自動廣告 和 自定義廣告分別用在不同場景下，也可以結合使用，各取所長。
版權申明:
- 未標註來源的內容皆為原創，未經授權請勿轉載（因轉載後排版往往錯亂、內容不可控、無法持續更新等）;
- 非營利為目的，演繹本博客任何內容，請以'原文出處'或者'參考鏈接'等方式給出本站相關網頁地址(方便讀者)。