PaperModテーマを使用したHugoブログにAdBlocker検出機能を追加する方法
このブログ記事では、PaperModテーマを使用してHugoブログにAdBlocker検出機能を追加する方法を学びます。広告ブロッカーを有効にしたユーザーに対して、無効化するかサイトをホワイトリストに登録するように促す、簡単な警告メッセージを含めます。 概要 以下は、私たちが行う手順の概要です： 警告メッセージのスタイルを指定するためのカスタムCSSファイルを作成します。 広告ブロッカーを検出するためのJavaScriptファイルを作成します。 警告メッセージ用のpartial HTMLファイルを追加します。 headとfooterのpartialsを拡張して、新しいファイルを含めます。 ステップバイステップのガイド 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....