Fork me on GitHub

Hexo NexT增加Google AdSense广告

Hexo博客增加Google AdSense广告,我使用的是next主题,以下讲解怎么在next主题中增加广告。

申请Google AdSense账号

申请账号这里不做太多介绍,Google AdSense官网

如果遇到访问不了的页面,是因为国内网络禁用了,需要翻墙后才可以访问。可以下载Lantern

增加广告

这里建议使用广告单元,而不是自动广告,亲测:使用自动广告经常广告出不来,使用广告单元可以固定广告的位置。

将广告代码粘贴在 HTML 中的什么位置

左边导航增加广告

在左边导航栏中增加广告【每个页面都会存在广告】

  1. 修改主题文件themes/next/layout/_layout.swig
  2. 搜索文件中header关键字,在<div class="header-inner">标签中,增加广告单元代码

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"> {%- include '_partials/header.swig' %}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 左边广告 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-9748432876982163"
data-ad-slot="4797001777"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</header>

文章内容顶部增加广告

在文章详情页,内容开头增加广告【只有内容详情页会存在广告】

  1. 修改主题文件themes/next/layout/_macro/post.swig
  2. 搜索文件中POST BODY关键字,在POST BODY前面代码中增加广告单元代码

注意:这里需要在广告单元代码中增加{% if not is_index %},是为了控制非主页才会展示。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% if not is_index %}
<div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 文章顶部广告 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-9748432876982163"
data-ad-slot="6421693182"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
{% endif %}

网页尾部增加广告

在网页尾部中增加广告【每个页面尾部都会存在广告】

  1. 修改主题文件themes/next/layout/_layout.swig
  2. 搜索文件中<div id="content" class="content">关键字,在<div id="content" class="content">标签后面,增加广告单元代码

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="content-wrap">
<div id="content" class="content">
{% block content %}{% endblock %}
</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-9748432876982163"
data-ad-slot="1294786751"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
{% include '_third-party/duoshuo-hot-articles.swig' %}
{% include '_partials/comments.swig' %}
</div>
FallSea wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!