在本篇文章中，我們將學習如何使用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>

4. 擴充head與footer區塊以包含新檔案

編輯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