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

研究 Hexo 的主题结构

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

我用的 Hexo 主题是 maupassant,来看下他的结构:

Theme 结构

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

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

这个需要自行研究、、、

代码部署

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

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

1
show_ad_post: true ##设置为 true

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

1
2
3
4
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 账户中复制下来的,上面明确说要你加在 \ 里,观察一下添加的目录大概能明白他的结构了吧。

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

Debug

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

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

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

1
2
3
4
5
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 天的审核时间,其实不是的,最起码一周的时间才能审核完。。。

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

广告屏蔽

广告投放

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

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