申请 Google AdSense 并为 Hugo 静态博客配置 Shortcodes 广告模板页面方便 Markdown 的书写和渲染

本博客有且只有在该文章末尾添加了测试用的广告。


1、注册 Google AdSense
官方链接:Google AdSense
开始
填入链接和邮箱:
填入链接和邮箱
接着使用 Google 账号登录以完成绑定:
绑定 Google 账号

2、确认网站所有权和审核
在首页,获取用以认证用的代码:
注:如果你的 Google 账号没有收款信息,需要先在收款人信息页面做填写,才能看到如下页面。 审核用代码
这里提示需要放置在 <head></head> 标记之间,那么还是直接去修改主题内的文件,我的路径为:\themes\pure\layouts\partials\head.html
新增审核代码
重新 build 页面并发布后,在页面上确定已经添加代码并开始审核:
开始审核
等待审核
审核结束后如果看到以下页面说明审核通过了:   审核通过

3、纠正 ads.txt 文件
你可能会出现这样的错误:
ads.txt 错误
修正方法官方也给出了:
修正方法
普通的项目直接在网站根目录下添加 ads.txt 文件就行了,但是通过 Hugo 渲染的模板项目 ads.txt 则需要放在静态文件目录下:/static
目录层级
渲染一下,public 的目录下有 ads.txt 就说明成功了:
成功

4、选择合适的广告类型
官方给了 3 种广告单元可供选择:
广告单元
我是给博文添加的,理论上信息流和文章内嵌类型的点击率更高:前者和文章或网页内容会有所关联,后者多数情况会以大图形式融入文章中。但是我个人是极度厌恶技术博客内插入广告的,这里只拿普通的展示广告做例子:
按需依次选择
接着就能拿到代码段了:
代码段
如果你是给自己网站的前端页面添加广告的话,直接复制到 HTML 页面中的指定位置做调整就行了。

5、为 Hugo 静态博客新建 Shortcodes 广告模板以方便 Markdown 的书写和渲染
Hugo Shortcodes 官方介绍:Shortcodes
引入 YouTube 视频的官方案例:single-positional-example-youtube
如果你只想实现广告或其他差不多的简单功能,直接和我继续操作下去也可以。
明确一下,Hugo 模板的查找顺序是:

  1. /layouts/shortcodes/.html
  2. /themes//layouts/shortcodes/.html

即优先使用主目录下的模板。
知道了模板存放路径,那么命名呢?命名也很简单,模板的 .html 文件名字可以自定义,在 Markdown 中书写的时候使用相同的名字就行了,例如我创建了 google-adsense.html 这个模板:
google-adsense.html
那么我在文章的 .md 文件中这样调用,后期 Hugo 就会自动渲染了:

{{< google-adsense >}}

把刚刚的 Google AdSense 的广告代码复制过来,并将部分值设定为用参数传入, google-adsense.html 的内容就变成了这个样子:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-{{ index .Params 0 }}"
     crossorigin="anonymous"></script>
<!-- 测试广告 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-{{ index .Params 0 }}"
     data-ad-slot="{{ index .Params 1 }}"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

调用:

{{< google-adsense 7999470995937770 3998950649 >}}

广告测试样例:



注意:广告生效需要时间,从 1 小时到 24 小时不等,期间你打开页面可能会发现广告处空白并在控制台报错:

Failed to load resource: the server responded with a status of 400 ()

参考讨论:Google adsense responding the server responded with a status of 400 (),一般情况下耐心等待即可。

结束。