如何在 Hugo 文章中添加 Adsense 广告？

首先创建一个 partial 模板，在使用的主题目录下面创建文件：layouts/partials/adsense-inarticle.html，添加如下的代码作为模板内容：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="{{.Site.Params.Adsense.client}}"
     data-ad-slot="{{.Site.Params.Adsense.inArticleSlot}}"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

我们在上面的模板中使用了两个变量：.Site.Params.Adsense.client 和 .Site.Params.Adsense.inArticleSlot，（这个直接填自己获取到的 id 也行，不一定需要设定这些变量）他们的值我们可以通过 Google AdSense 后台获取，然后将获取到的 data-ad-client 和 data-ad-slot 的值填充到 config.toml文件中，放置在一个 params.adsense 模块下面，如下所示：

[params.adsense]
  client = "xxxxxxx"
  inArticleSlot = "xxxxxxxx"

然后在我们写的 markdown 文档中，我们只需要在需要放置广告的位置用一个标签代替，用来表示一个 Adsense 广告单元，然后我们使用 hugo 的函数将这个标签从partial模板中替换成真正的 Adsense 代码块，如下所示：

content
content

<!--adsense-->

content

然后去修改文章页面渲染的模板，打开文件 layouts/_default/single.html，将{{ .Content }}替换成下面的代码：位置也有可能是 layouts/post/single.html，最主要还是看自己用的是什么主题，方法类似。

{{ replace .Content "<!--adsense-->" (partial "adsense-inarticle.html" .) | safeHTML }}

然后我们再利用 hugo 重新生成文章发布，然后你就能看到 adsense 的广告了。

https://www.google.com/adsense/

参考

https://www.qikqiak.com/post/add-adsense-in-hugo-article/

文章目录

Google AdSense 网址

参考