Google Adsense

廣告

主題已集成谷歌廣告（自動廣告）

1
2
3
4
5
6
google_adsense:
  enable: true
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client: # 填入個人識別碼
  enable_page_level_ads: true

hexo-theme-butterfly-docs-google-adsense1.png

主題預留了三個位置可供插入廣告，分別為主頁文章(每三篇文章出現廣告)/aside 公告之後/文章頁打賞之後。
把 html 代碼填寫到對應的位置

1
2
3
4
ad:
  index:
  aside:
  post:

例如:

1
index: <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="xxxxxxxxxxxx" data-ad-client="ca-pub-xxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({})</script>

部署广告

自动广告

1
2
3
4
5
6
7
8
9
10
11
12
google_adsense:
  enable: true
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client: data-ad-client="ca-pub-123456"
  enable_page_level_ads: true

# 手动广告位置为空
ad:
  index:
  aside:
  post:

手动广告

  1. 在 AdSense 后台创建广告单元
    • 登录Google AdSensehttps://www.google.com/adsense/
    • 进入 广告 → 按广告单元
    • 创建三种类型的广告单元：
      • 展示广告（用于侧边栏）
      • 信息流广告（用于首页文章列表）
      • 文章内嵌广告（用于文章页）
  2. 获取广告代码示例（创建后会得到类似下面的代码）：
1
2
3
4
5
6
7
8
9
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-123456"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
  1. 修改 _config.butterfly.yml：

手动广告的设置说明：

配置变更：

配置项 自动广告 手动广告
auto_ads true false
enable_page_level_ads true false
client 包含 data-ad-client= 仅 ca-pub-xxx

三个广告位置：

  1. index - 首页文章列表，每3篇文章后显示（适合信息流广告）
  2. aside - 侧边栏公告之后（适合展示广告）
  3. post - 文章页打赏按钮之后（适合文章内嵌广告）

操作步骤：

  1. 登录AdSense 后台https://www.google.com/adsense/
  2. 创建 3 个广告单元，分别对应上述位置
  3. 将获取到的 data-ad-slot 值替换配置中的：
    • YOUR_INDEX_SLOT_ID
    • YOUR_ASIDE_SLOT_ID
    • YOUR_POST_SLOT_ID
  4. 重新生成并部署：
1
hexo clean && hexo g && hexo d

注意： 手动广告需要等待 AdSense 审核通过后才能正常显示。

- [个人网站接入Google Ads的一点心得 - 老朱独立开发 - 博客园](https://www.cnblogs.com/FindTheWay/p/18274632) - [(6 封私信) 个人网站 博客 如何接广告？ - 知乎](https://zhuanlan.zhihu.com/p/665156190) - [个人博客如何变现：Google Adsense 接入 Hugo | Mason's Blog](https://masonblog.github.io/post/blog20250320/) - [hexo 增加 google AdSense 广告 | Yezi's Hexo Blog](https://blog.yeyeziblog.eu.org/2024/02/21/Tech/hexo/hexo 增加 google AdSense 广告/index.html) - [hexo个人next主题博客接入谷歌广告 - 广告流程自动化](https://geek.digiasset.org/pages/affiliate/adsense/) - [Hexo网站如何承接google AdSense广告 - 简书](https://www.jianshu.com/p/9cc8f03c28c9)