Hexo的Next主题下接入Google AdSense广告

简介

使用Google Adsense也好几个月了,先以 Next 主题为例,对Hexo下Google Adsense的使用方法做个记录,方便以后更改广告布局。

自动广告

首先建立目录~\themes\next\layout\google_adsense

在此目录下建立文件auto_ads.swig,内容如下。其中Publisher ID可以在Google Adsense的账号信息里找到。

1
<script data-ad-client="你自己的Publisher ID" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

打开~\themes\next\layout\_partials\head\head.swig,在其中任意部位插入

1
2
<!--谷歌广告-->
{% include '../../google_adsense/auto_ads.swig' %}

正文内容前的广告单元

~\themes\next\layout\google_adsense下建立文件banner_ads.swig

建立一个新的广告单元,复制其代码到文件内,例如

1
2
3
4
5
6
7
8
9
10
11
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Banner Ads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="你自己的Publisher ID"
data-ad-slot="3949852758"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

打开~\themes\next\layout\_macro\post.swig,在如下位置

1
2
3
4
5
6
7
8
9
10
{% macro render(post, is_index, post_extra_class) %}
...
<div class="post-body{% if post.direction && post.direction.toLowerCase() === 'rtl' %} rtl{% endif %}" itemprop="articleBody">
...
{% else %}
<!-- 在此插入 -->
{{ post.content }}
{% endif %}
</div>
...

插入下列代码

1
2
<!--谷歌广告-->
{% include '../google_adsense/banner_ads.swig' %}

侧边栏广告单元

~\themes\next\layout\google_adsense下建立文件sidebar_ads.swig

建立一个新的广告单元,复制其代码到文件内,例如

1
2
3
4
5
6
7
8
9
10
11
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Sidebar Ads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="你自己的Publisher ID"
data-ad-slot="4752632688"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

打开~\themes\next\layout\_macro\sidebar.swig,在如下位置

1
2
3
4
5
6
7
8
9
{% macro render(is_post) %}
....
<aside id="sidebar" class="sidebar">
<div class="sidebar-inner">
...
<!-- 在此插入 -->
</div>
</aside>
...

插入下列代码

1
2
<!--谷歌广告-->
{% include '../google_adsense/sidebar_ads.swig' %}

文章页脚广告单元

~\themes\next\layout\google_adsense下建立文件footer_ads.swig

建立一个新的广告单元,复制其代码到文件内,例如

1
2
3
4
5
6
7
8
9
10
11
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Footer Ads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="你自己的Publisher ID"
data-ad-slot="2212253348"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

打开~\themes\next\layout\_macro\post.swig,在post-body后,post-footer前,位置如下

1
2
3
4
5
6
7
8
9
...
{#####################}
{### END POST BODY ###}
{#####################}
...
<!-- 在此插入 -->
...
<footer class="post-footer">
...

插入下列代码

1
2
3
4
<!--谷歌广告-->
{% if not is_index %}
{% include './google_adsense/footer_ads.swig' %}
{% endif %}
--- 本文结束 The End ---