分享两个内置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 上下载源码安装试试吧！