在本博客文章中，我们将学习如何使用 PaperMod 主题为您的 Hugo 博客添加广告拦截检测。我们还将包括一个简单的警告消息，提示已启用广告拦截器的用户禁用它或将您的网站添加到白名单。

概述

以下是我们将采取的步骤的快速概述：

  1. 创建自定义 CSS 文件来样式化警告消息。
  2. 创建 JavaScript 文件以检测广告拦截器。
  3. 添加部分 HTML 文件以显示警告消息。
  4. 扩展 head 和 footer 部分以包含我们的新文件。

逐步指南

1. 创建自定义 CSS 文件

在 assets/css/extended/ 目录下创建一个名为 custom_css.css 的新文件，并粘贴以下 CSS 代码：

#adblock-warning {
  background-color: #f2dede;
  color: #a94442;
  border-color: #ebccd1;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

2. 创建 JavaScript 文件以检测广告拦截器

在 static/js/ 目录下创建一个名为 adblock-detection.js 的新文件，并粘贴以下 JavaScript 代码：

function detectAdBlocker() {
  const adBlockTest = document.createElement('div');
  adBlockTest.innerHTML = ' ';
  adBlockTest.className = 'ad ads adbadge doubleclick BannerAd adsbox ad-placeholder ad-placement';
  document.body.appendChild(adBlockTest);
  window.setTimeout(() => {
    if (adBlockTest.offsetHeight === 0) {
      document.getElementById('adblock-warning').style.display = 'block';
      console.log('Ad-blocker detected.');
    } else {
      console.log('No ad-blocker detected.');
    }
    adBlockTest.remove();
  }, 100);
}

window.addEventListener('load', detectAdBlocker);

3. 添加用于警告消息的部分 HTML 文件

在 layouts/partials/ 目录下创建一个名为 adblock-warning.html 的新文件，并粘贴以下 HTML 代码：

<div id="adblock-warning" style="display:none;">
  <p>Please consider disabling your ad-blocker or whitelisting our website. Ads help support our content and keep it free for everyone. Thank you!</p>
</div>

编辑 layouts/partials/extend_head.html 文件，并添加以下行：

<link rel="stylesheet" href="{{ "css/extended/custom_css.css" | relURL }}">

编辑 layouts/partials/extend_footer.html 文件，并添加以下行：

<script src="{{ "js/adblock-detection.js" | relURL }}" defer></script>

结论

通过完成以上步骤，您已成功地使用 PaperMod 主题为您的 Hugo 博客添加了广告拦截检测。启用广告拦截器的访问者现在将看到一个礼貌的警告消息，鼓励他们禁用广告拦截器或将您的网站添加到白名单，帮助支持您的内容并使其对所有人免费。

Source code : https://github.com/hobbyworker/hugo-demo

Demo : https://hobbyworker.me/hugo-demo