add adblock check

baomidou · May 15, 2024 · 672aaff · 672aaff
1 parent 13fbdd7
commit 672aaff
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 43 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -26,49 +26,6 @@ export default defineConfig({
             gtag('config', 'G-7Y35RMZFVD');
           `
         },
-        {
-          tag: 'script',
-          attrs: {
-            src: 'https://cdn.wwads.cn/js/makemoney.js',
-            async: true,
-          },
-          content: `
-            // 万维广告“禁止”广告拦截
-            // function called if wwads is blocked
-            // https://github.com/bytegravity/whitelist-wwads
-            function ABDetected() {
-              var adBlockDetected_div = document.createElement("div");
-              adBlockDetected_div.style.cssText = "position: absolute; top: 0; left: 0; width: 100%; background: #fc6600; color: #fff; z-index: 9999999999; font-size: 14px; text-align: center; line-height: 1.5; font-weight: bold; padding-top: 6px; padding-bottom: 6px;";
-              adBlockDetected_div.innerHTML = "我们的广告服务商 <a style='color:#fff;text-decoration:underline' target='_blank' href='https://wwads.cn/page/end-user-privacy'>并不跟踪您的隐私</a>，为了支持本站的长期运营，请将我们的网站 <a style='color: #fff;text-decoration:underline' target='_blank' href='https://wwads.cn/page/whitelist-wwads'>加入广告拦截器的白名单</a>。";
-              document.getElementsByTagName("body")[0].appendChild(adBlockDetected_div);
-              // add a close button to the right side of the div
-              var adBlockDetected_close = document.createElement("div");
-              adBlockDetected_close.style.cssText = "position: absolute; top: 0; right: 10px; width: 30px; height: 30px; background: #fc6600; color: #fff; z-index: 9999999999; line-height: 30px; cursor: pointer;";
-              adBlockDetected_close.innerHTML = "×";
-              adBlockDetected_div.appendChild(adBlockDetected_close);
-              // add a click event to the close button
-              adBlockDetected_close.onclick = function() {
-              this.parentNode.parentNode.removeChild(this.parentNode);
-              };
-            }
-        
-            function docReady(t) {
-              "complete" === document.readyState ||
-              "interactive" === document.readyState
-                ? setTimeout(t, 1)
-                : document.addEventListener("DOMContentLoaded", t);
-            }
-        
-            //check if wwads' fire function was blocked after document is ready with 3s timeout (waiting the ad loading)
-            docReady(function () {
-              setTimeout(function () {
-                if( window._AdBlockInit === undefined ){
-                    ABDetected();
-                }
-              }, 3000);
-            });
-          `
-        },
         {
           tag: 'script',
           content: `
@@ -80,11 +37,19 @@ export default defineConfig({
               s.parentNode.insertBefore(hm, s);
             })();
           `
+        },
+        {
+          tag: 'script',
+          attrs: {
+            src: 'https://cdn.wwads.cn/js/makemoney.js',
+            async: true,
+          }
         }
       ],
       customCss: ["./src/styles/tailwind.css", "./src/styles/custom.css"],
       components: {
         Footer: "./src/components/Footer.astro",
+        Header: "./src/components/Header.astro",
         PageSidebar: "./src/components/PageSidebar.astro",
       },
       locales: {

diff --git a/src/components/CheckAdBlocked.svelte b/src/components/CheckAdBlocked.svelte
@@ -0,0 +1,36 @@
+<script>
+    import { onMount } from 'svelte';
+  
+    let adBlockDetected = false;
+  
+    function checkAdBlocker() {
+      setTimeout(() => {
+        if (window._AdBlockInit === undefined) {
+          adBlockDetected = true;
+        }
+      }, 2000);
+    }
+  
+    onMount(() => {
+      checkAdBlocker();
+    });
+  </script>
+
+  <div class="{adBlockDetected ? 'flex' : 'hidden'} fixed inset-0 bg-black bg-opacity-90 z-[99999]">
+    <div class="m-auto p-5 bg-white rounded-lg text-center space-y-4">
+      <p class="text-center text-lg text-gray-700">
+        我们的广告服务商并不跟踪您的隐私，为了支持本站的长期运营，请将我们的网站加入广告拦截器的白名单。
+      </p>
+      <div class="flex justify-center gap-4">
+        <a href="https://wwads.cn/page/end-user-privacy" target="_blank"
+          class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-300 text-current no-underline hover:no-underline">
+          隐私声明
+        </a>
+        <a href="https://wwads.cn/page/whitelist-wwads" target="_blank"
+          class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition duration-300 text-current no-underline hover:no-underline">
+          加入白名单
+        </a>
+      </div>
+    </div>
+  </div>
+
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -0,0 +1,11 @@
+---
+import type { Props } from '@astrojs/starlight/props';
+import Default from "@astrojs/starlight/components/Header.astro";
+import CheckAdBlocked from '@/components/CheckAdBlocked.svelte';
+---
+
+<Default {...Astro.props}>
+    <slot/>
+</Default>
+
+<CheckAdBlocked client:load />