开源两个内置Google广告位的Typecho主题

前言

很多项目的开始都是因为情怀和热爱，“为爱发电”是一件很值得尊敬的事情，然而大量“为爱发电”的项目末了却不得不因”难以为继“而被迫停服。
园子就是很好的案例，它一直以来就是一个很纯粹的技术分享平台，但纯爱是最容易受伤的，不过哪怕是如今逐步探索商业化了，和”牛皮藓“满天飞，看个文章还要登录的某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 上下载源码安装试试吧！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。