Hexo 博客如何检测并拦截广告拦截插件用户访问

框架师

发布于 2025-07-01 09:15:40

12100

代码可运行

文章被收录于专栏：墨白的Java基地墨白的Java基地

运行总次数：0

代码可运行

前言

在运营个人博客时，很多站长会通过 Google AdSense 等广告平台获取一些收入。然而，越来越多的用户会在浏览器中安装广告拦截插件（如 Adblock、uBlock Origin 等），这会导致广告无法正常展示，影响站长的收益。本文将介绍如何在 Hexo 博客（以 Matery 主题为例）中检测用户是否启用了广告拦截插件，并在检测到后禁止其访问博客内容。

问题描述

需求：当检测到用户浏览器启用了广告拦截插件时，禁止其访问博客内容，并弹出友好提示。
环境：Hexo 博客，Matery 主题，已集成 Google 广告。
难点：广告拦截插件种类繁多，检测方式需兼容主流插件，且不能影响正常用户体验。

方案分析

常见的广告拦截检测方式有两种：

诱饵元素法：在页面中插入带有广告相关 class 的元素，检测其是否被隐藏。
第三方检测库：如 FuckAdBlock，专门用于检测广告拦截插件，兼容性和准确率更高。

我们选择第二种方式，使用 FuckAdBlock 库，结合自定义 JS 实现检测和拦截。

解决方案

1. 引入 FuckAdBlock 检测库

在博客主题的 <head> 区域引入 FuckAdBlock：

<script async src="https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js"></script>

2. 编写检测与拦截脚本

在 themes/matery/source/js/adblock-detector.js 新建如下内容：

function blockContent() {
    document.documentElement.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100vh;font-size:2rem;color:#d32f2f;background:#fff;flex-direction:column;"><span>检测到您使用了广告拦截插件 </span><br><span>请关闭广告拦截后访问本站 </span></div>';
}
window.addEventListener('load', function() {
    // 等待 fuckAdBlock 加载
    function waitFAB() {
        if (typeof fuckAdBlock !== 'undefined') {
            fuckAdBlock.onDetected(blockContent);
            fuckAdBlock.onNotDetected(function(){});
            fuckAdBlock.check();
        } else {
            setTimeout(waitFAB, 50);
        }
    }
    waitFAB();
});

3. 在 head.ejs 中引入检测脚本

在 themes/matery/layout/_partial/head.ejs 的 <head> 区域添加：

<script src="<%- theme.jsDelivr.url %><%- url_for('js/adblock-detector.js') %>"></script>

确保在 FuckAdBlock 库之后引入。

4. 部署并测试

重新生成并部署 Hexo 博客。
用安装了广告拦截插件的浏览器访问，应该会弹出提示并禁止访问内容。

实现效果

当用户启用广告拦截插件访问博客时，会看到如下提示，并无法浏览博客内容：

检测到您使用了广告拦截插件请关闭广告拦截后访问本站

总结

通过引入 FuckAdBlock 检测库并结合自定义 JS，我们可以有效检测并拦截使用广告拦截插件的用户，保护自己的广告收益。该方案兼容性好，易于集成，适合所有 Hexo 博客用户参考。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-06-30，如有侵权请联系 cloudcommunity@tencent.com 删除

hexo

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度