Trong bài đăng blog này, chúng ta sẽ tìm hiểu cách thêm tính năng phát hiện AdBlocker vào blog Hugo của bạn sử dụng theme PaperMod. Chúng ta cũng sẽ bao gồm một thông báo cảnh báo đơn giản cho những người dùng đã bật trình chặn quảng cáo, khuyến khích họ tắt nó hoặc thêm trang web của bạn vào danh sách cho phép.

Tổng quan

Dưới đây là tổng quan nhanh về các bước chúng ta sẽ thực hiện:

  1. Tạo file CSS tùy chỉnh để tạo kiểu cho thông báo cảnh báo.
  2. Tạo file JavaScript để phát hiện trình chặn quảng cáo.
  3. Thêm file HTML partial cho thông báo cảnh báo.
  4. Mở rộng các partial head và footer để bao gồm các file mới của chúng ta.

Hướng dẫn từng bước

1. Tạo file CSS tùy chỉnh

Tạo file mới có tên custom_css.css trong thư mục assets/css/extended/ và dán đoạn mã CSS sau:

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

2. Tạo file JavaScript để phát hiện trình chặn quảng cáo

Tạo file mới có tên adblock-detection.js trong thư mục static/js/ và dán đoạn mã JavaScript sau:

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. Thêm file HTML partial cho thông báo cảnh báo

Tạo file mới có tên adblock-warning.html trong thư mục layouts/partials/ và dán đoạn mã HTML sau:

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

Chỉnh sửa file layouts/partials/extend_head.html và thêm dòng sau:

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

Chỉnh sửa file layouts/partials/extend_footer.html và thêm dòng sau:

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

Kết luận

Sau khi hoàn thành các bước trên, bạn đã thêm thành công tính năng phát hiện AdBlocker vào blog Hugo của mình sử dụng theme PaperMod. Những khách truy cập đã bật trình chặn quảng cáo sẽ thấy thông báo cảnh báo lịch sự khuyến khích họ tắt nó hoặc thêm trang web của bạn vào danh sách cho phép, giúp hỗ trợ nội dung của bạn và giữ cho mọi người truy cập miễn phí.

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

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