博客搭建 (五) 接入 Google AdSense (NexT v8.2.1)

发表于 更新于 阅读次数： 评论数： Disqus： 本文字数： 1.5k 阅读时长 ≈ 1 分钟

既然开了博客，那就干脆把Google的AdSense接入得了，到时候要是能够收到谷歌的一点广告费，覆盖日常的VPS应用也不错。因为我用的是Next的主题，那接下来就了解一下如何将谷歌的广告接入NexT主题中。

概要：

  • 总共分两步：
    1. 在谷歌的网站上申请 Google AdSense的账号
    2. 将谷歌的广告链接加入页面的 Head 中
      第1步基本上每什么问题。关键在第2步，如果直接修改Hexo生成的html文件之后，如果接下来运行 hexo deloy，会将原来的修改直接覆盖掉。下面我们着重讨论这个问题。

在谷歌的网站上申请 Google AdSense的账号

这一步比较简单，参考这个链接在 NexT 主题中接入 Google AdSense 。完成这一部之后谷歌会给你一个脚本的链接：

1
2
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8151465709714450" 
crossorigin="anonymous"></script>

提示你应该把它加到页面的 Head 中，我们先不按照它提示的方法操作。

将Google AdSense的链接加入blog

根据官方的文档, 可以通过Custom Files来订制Head。

先找到 themes/next/_config.yml 将 head 这一行注释取消掉，让它生效。

1
2
3
4
5
6
7
8
9
10
11
12
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

然后在项目的根目录下面的 source 下面创建文件夹和文件：source/_data/head.njk，注意，这里的 source 指的是项目根目录下面的 source ，不是 themes/next/source。

接下来运行：

1
2
3
hexo clean
hexo g
hexo deploy

重新生成部署，然后刷新博客，右键查看网页的源码，确认谷歌的广告链接已经生效。

参考链接

在 NexT 主题中接入 Google AdSense

本系列文章：
博客搭建 (一) 开始
博客搭建 (二) 链接谷歌域名
博客搭建 (三) 链接google分析
博客搭建 (四) 显示文章的字数和阅读时长
博客搭建 (五) 接入 Google AdSense (NexT v8.2.1)

相关文章