이 블로그 포스트에서는 PaperMod 테마를 이용하여 휴고 블로그에 광고 차단기 감지 기능을 추가하는 방법을 배우게 될 것입니다. 또한 광고 차단기가 활성화된 사용자를 위한 간단한 경고 메시지를 포함하여 사용자들이 광고 차단기를 비활성화하거나 웹 사이트를 화이트리스트에 추가할 것을 권장합니다.

개요

다음은 우리가 수행할 단계에 대한 간단한 개요입니다.

  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 테마를 이용하여 휴고 블로그에 광고 차단기 감지 기능을 성공적으로 추가했습니다. 광고 차단기가 활성화된 방문자는 이제 웹 사이트를 화이트리스트에 추가하거나 비활성화할 것을 권장하는 공손한 경고 메시지를 볼 수 있습니다. 이를 통해 콘텐츠를 지원하고 모두에게 무료로 유지할 수 있도록 도와줍니다.

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

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