前言
很多專案的開始都是因為情懷和熱愛，“為愛發電”是一件很值得尊敬的事情，然而大量“為愛發電”的專案最後卻不得不因”難以為繼“而被迫停服。
園子就是很好的案例，它一直以來就是一個很純粹的技術分享平臺，但純愛是最容易受傷的，不過哪怕是現在逐步探索商業化了，和”牛皮蘚“滿天飛，看個文章還要登入的某N（不點名，你知道我在說誰）相比，依然是一股清流。
說回本文主題，分享兩個我個人開發的內建 Google 廣告位的Typecho主題，我希望使用這兩款主題搭建網站的同學能夠永不停服，所以我一開始就想著把谷歌廣告整合進去，雖未必能賺多少錢，但只要持續輸出文章、作品，確保站點是活著的，一年下來掙個伺服器和域名的費用總還是可以的吧！
1. 展示效果
篇幅有限，主題效果不截圖展示，大家可以透過下面各小節中的專案地址詳細檢視，這裡主要介紹 Google Ads 整合的問題，本以為整合 Google Ads 會是一件很簡單的事情，最多調一下樣式就好了，但結果為了能讓廣告正常顯示，卻很費了一些力氣，主要就是PJAX這種頁面無跳轉的技術（也包括Vue，React等前端SPA框架）與 Google Ads 存在相容性問題，本文不談坎坷的道路，後面單獨寫一篇文章來記錄踩坑過程，這裡直接展示一下整合後的效果。
1.1 部落格主題
專案地址
https://github.com/ZShijun/WaterDrop
為了兼顧收益和使用者體驗，我一共為部落格主題設定了三個廣告位：側邊欄底部，文章頁頭部和文章頁尾部。由於窄屏沒有側邊欄，因此，窄屏其實只有兩個廣告位。
文章頁頭部效果
文章頁尾部效果
側邊欄效果
1.2 導航主題
專案地址
https://github.com/ZShijun/BeaconNav
文章頁效果
而導航主題實在沒什麼好的位置，就只在詳情頁中設定了一個廣告位。
怎麼樣？無論是部落格主題，還是導航主題，廣告嵌入的都還算和諧，不噁心吧？如果你用了我開發的主題，也趕緊試試吧，蚊子再小也是肉，給自己稍微增加一點創作的動力吧！
2. 如何使用
兩個主題的設定方式大同小異，因此我以部落格主題為例演示說明。配置方式很簡單，我在主題配置頁面增加了一個谷歌廣告的配置項，如下圖所示：
其中，publisher是釋出商ID，後面三個可以理解為廣告位的編號，都可以直接從 Google Ads 後臺獲取，如下圖所示：
就這麼簡單，搞定了，至於怎麼操作以及原因，我打算後面再寫一篇文章來單獨解釋。
不出意外的話，廣告很快就能在你的網站中展現出來了，所以，首要問題還是得先註冊一個 Google Ads 賬號，心動就趕緊行動起來吧！
3. 魚和熊掌
如果你不希望你的網站顯示廣告，主題中的谷歌廣告的配置直接空著就行了，不顯示廣告起碼有以下兩個優點：
- 沒有了廣告，網站會更純淨一些，使用者體驗也會好一些，當然，每個廣告位都可以單獨選擇是否投放；
- 由於
PJAX和 Google Ads 相容性的問題，接入廣告後，向文章內容頁的跳轉會退化成頁面跳轉模式，而關閉廣告後，又可以恢復原來的PJAX路由模式，文章頁載入也會快一些。
事實上，上述優點只是理論上的，實際感受未必有那麼明顯，因為廣告並不是每次都顯示，也並不是所有廣告位都會同時顯示。至於效能的變化，訪問者也未必會有明顯的感受。
總之，不管怎麼樣，收益和體驗，就如同魚和熊掌，二者不可兼得，總還是需要權衡一下的。
結語
到此並沒有結束，後續還要繼續觀察觀察，例如，遮蔽一些在咱們這邊比較敏感的廣告，並且，事實上，廣告展示可能還有BUG，路也沒有完全走通，套句名言：這才剛剛開始！
說到這裡，為了除錯，我這幾天幾乎每天都會重新整理上百次廣告，現在都不太敢自己訪問自己的網站了，生怕一不小心就被判定違規了，所以測試的可能不太充分，如果你在使用過程中發現新的問題，歡迎留言反饋，我會盡快驗證修復。
感興趣的趕緊去 GitHub 上下載原始碼安裝試試吧！