给 Hexo 博客加上 adsense 广告

两周前，我在研究 GA 与其他产品的关联时，注意到 Adsense 这个产品，所以就想在我的博客中加上广告位试试。搜索了一些资料，发现这么做的人不多，自己研究也是费了一番力气，以下分享一些心得，希望给有兴趣的同学一些帮助。

因为是自己加代码到 blog 中，所以需要了解添加位置，已经如何做配置，这一步对于我这种只懂一些毛皮的前端小菜鸟来说，花了一些时间。。。

我用的 Hexo 主题是 maupassant，来看下他的结构：

Theme 结构

了解 Hexo 主题的第一步先去官网研究一下这些组成成分的含义：主题 | Hexo

我觉得官网看完也是不太能搞明白的，你还需要参考一些 Hexo 主题开发的 blog，对照已经下载的主题代码慢慢摸索他们的作用。

这个需要自行研究、、、

代码部署

从 Adsense 中下载好代码之后，需要做部署了。这里需要注意的是你下载的是 JavaScript 代码，需要转换成 Jade 类型的，不需要自己写，使用在线转换器就好：html2jade

打开主题目录下的 maupassant/_config.yml 文件,添加个广告控制开关：

show_ad_post: true  ##设置为 true

在 maupassant/layout/_partial/head.jade 里添加代码：

if theme.show_ad_post

      script(async='', src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js')

      script.

        (adsbygoogle = window.adsbygoogle || []).push({google_ad_client: "ca-pub-XXXXX", enable_page_level_ads: true});

这段代码是从你申请的 Adsense 账户中复制下来的，上面明确说要你加在 <head> 里，观察一下添加的目录大概能明白他的结构了吧。</head>

添加完这段之后，你需要 debug 一下，看下是不是部署成功：

Debug

看到这条就差不多了，安心等 3 天左右过 Adsense 的审核。审核完成之后你会发现你满屏的广告。。。。

如果不想这样，可以考虑在 Adsense 中创建广告位，然后在特定位置加上代码就好了，我的选择是在文章结束，评论上方加上一条 720x90 的广告，方法如下：

在 maupassant/layout/post.jade 里的 comment 上方添加代码：

if theme.show_ad_post
      script(async='', src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js')
      ins.adsbygoogle(style='display:inline-block;width:728px;height:90px', data-ad-client='ca-pub-2914187494111775', data-ad-slot='9146169046')
      script.
        (adsbygoogle = window.adsbygoogle || []).push({});

这样就可以了。

关于 Adsense

Adsense 这部分，首先要去 Adsense 首页创建账户，创建完之后就会提供一段代码让你添加到网页中去做审核。他会告诉你有 3 天的审核时间，其实不是的，最起码一周的时间才能审核完。。。

他里面还是可以做些设置的, 参考如下设置：

广告屏蔽

广告投放

可能你觉得我写了很多废话，但是思考和探索如何解决问题的过程很重要，是学习能力提高的方法。当有新想法和好的点子时，不要认为自己的能力不足而轻易放弃，而是利用你所有的知识或者资源（上网搜索或者请教身边的专家）去做你想做的事情，目标明确之后，只要不放弃，大部分问题都可以解决哈~

部署了广告之后，虽然也赚不了多少钱，但是更新博客突然有了动力，神不神奇。。。如果看到了很黄很暴力的广告，请不要抱怨我，根据人群特征定向的好吗？你需要反省你自己~~~

最后编辑于：2018.01.09 23:35:03