经过一周的折腾,原WordPress中的内容已经完全转到Hexo了,也把博客中涉及的代码块,内链等都修正了一把.

刚好,自己google adsense中还有点钱,挂个adsense也不错,但根据Hexo博客用到的主题不同,使用的语言就不同,本站使用的是maupassant主题,简洁大气,但jade语法完全不会,直接使用google adsense将会有各种无法解析的错误.

经过一番折腾,终于搞定,现将方法记录如下.

在主题中添加广告位置

此处与自己在用的maupassant主题为例,其他的大同小异.

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

1
2
3
widgets_on_small_screens: false ## Set to true to enable widgets on small screens.
show_ad_post: true  ##如需要开启广告位,设置为 true
menu:

打开主题模板,在对应位置添加广告代码.我这是在文章页底部,评论框上方添加,所以打开主题目录\layout\post.jade

1
2
3
4
5
#这里的代码已经是按jade语法改造后的代码
if theme.show_ad_post == true #对应主题配置中添加的开关
    script(async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js")
    ins.adsbygoogle(style="display:block" data-ad-client="ca-pub-xxx" data-ad-slot="xxx" data-ad-format="auto")
    script (adsbygoogle = window.adsbygoogle || []).push({});

jade变更为pug后，代码格式稍有变更：

1
2
3
4
5
script(async='' src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js")
ins.adsbygoogle(style="display:block" data-ad-client="#{theme.adsense.google_ad_client}" data-ad-format="auto")
script.
  (adsbygoogle = window.adsbygoogle || []).push({});

保存发布即可看到效果.如果是在本地测试,那么请hosts劫持访问才会显示广告.

获取adsense代码并按jade语法改造

原生广告代码如下

1
2
3
4
5
6
7
8
9
10
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 自适应 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxx"
     data-ad-slot="xxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

这样直接贴到主题模板中或在模板中引用的时候将会提示错误

1
2
3
4
5
6
ERROR Process failed: layout/_custom_ad/google.jade
Error: C:\Users\xxx\Hexo\themes\maupassant\layout\_custom_ad\google.jade:6
...
  \> 6|          style="display:block"
...
unexpected token "indent"

我们需要将其按jade语法改造成这样才可以

1
2
3
script(async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js")
ins.adsbygoogle(style="display:block" data-ad-client="ca-pub-xxx" data-ad-slot="xxx" data-ad-format="auto")
script (adsbygoogle = window.adsbygoogle || []).push({});

也尝试过把代码放在html中,然后主题中include html,但这样会造成一个页面里有多个<head>等网页元素,相当于产生了多重引用,不推荐.