建站第十五篇 Google Adsense在Hugo中的配置

Posted by     "DD" on Friday, November 11, 2022 | 阅读 |,阅读约 3 分钟

博客运行一段时间之后,有了一点点流量,随即向Google申请了Adsense,流量虽少也不想浪费。 如何申请就不多讲了,去Google Adsense官方一步一步照做就可以。这里主要说说,申请下来ID之后,如何在Hugo里配置相应的代码和ads.txt

配置广告代码

Hugo有很多主题,每个主题配置Adsense的方式可能不太一样,我的博客目前使用的是 Clean White 主题,下面介绍的就是如何在Clean White 主题中加入Adsense配置。

Adsense 申请成功以后,会有一段广告代码,类似下面这种:

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

上述代码中的一串数字谷歌分配的publisher ID,需要改成自己的ID。把这段代码放到/themes/hugo-theme-cleanwhite/layouts/partials/head.html文件里面,然后重新部署。

配置ads.txt

配好广告代码后,我们还需要确保ads.txt文件可以生成到网站的根目录。否则Adsense会发给你一段警告框,如下图。也可以从这里下载到自己的ID号对应的ads.txt文件。

关于如何放置ads.txt,我找了很多中文技术博文,都说的是把文件放在/public目录下就可以了,但这显然不适合我。正如前面系列博文所属,我的站点是利用Github Action发布成Github Pages的方式部署的。任何直接放到/public目录的方式都不可行。只能利用Hugo的生成机制,终于从主题目录中找到了办法。

Hugo允许自定义robots.txt,但不允许自定义ads.txt并且不可能通过layout模式来实现。那么,目前最好的替代方案,只能是将ads.txt文件放到主题目录下的static文件夹中。对于我的主题就是将ads.txt文件放到/themes/hugo-theme-cleanwhite/static路径下。

这样,重新部署之后,就可以通过路径localhost:1313/ads.txt访问到ads.txt文件了。


参考文章

  1. 《谷歌 Adsense 申请及在 Hugo 中的配置》,https://jdhao.github.io/2019/09/22/google_adsense_hugo_config/
  2. Hugo Adsense Ads Txt,https://rajasimon.io/blog/hugo-adsense-ads-txt/
  3. Ads.txt guide, https://support.google.com/adsense/answer/7532444?hl=en
  4. Robots.txt File, https://gohugo.io/templates/robots/

本作品由 IvyWooo 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可,转载请注明出处。

本文链接

「真诚赞赏,手留余香」

猫猫和狗狗的小窝

真诚赞赏,手留余香

使用微信扫描二维码完成支付


本文总阅读量