Typecho 文档:监听评论「遥遥领先」

2023-09-12

适用程序:Typecho
程序版本:1.2.1
文档作者:Lopwon
作者博客:Lopwon.com
发布页面:Lopwon.com/3561.html
官方演示:「遥遥领先

注意:此文档源于作者在博客改造中的一些经验总结,转载还请署名。

敬告:此文档操作涉及程序核心文件的修改,作者不对你在使用中产生的任何问题造成的不良后果,承担责任。

文档说明

最近,华为「遥遥领先」有点洗脑,不被监听成了出海销售的卖点,由此得到启发,有了本文档:通过实时监听评论输入框的内容,当检测到评论者输入了博主事先自定义的敏感词后,即时将其替换为 *** 并弹出浮层提示。

相对于之前制作的,在后端实现评论脱敏的 Lopwon Oops 插件,以下方法是在前端处理敏感词,也能弹出提示信息。

提示:此方法会被不讲武德的手段(比如:使用空格、横杠隔开),绕过关键词脱敏,所以,没有后端脱敏有效。

使用方法

A 涉及文件

usr/themes/***/footer.php

B 改造文件

作用:给评论框添加关键词脱敏功能

在主题的适当文件适当位置(如:文件 footer.php 页脚处)引入以下代码(留意注释,以及按需修改):

    <style>
    .Lopwon_Popup {
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        padding: 20px;
        background-color: #eee;
        border: 1px solid #ccc;
        border-radius: 5px;
        display: none;
    }
    </style>

    <div id="Lopwon_Popup" class="Lopwon_Popup"></div>

    <script>
    var keywords = [
        '苹果',
        '联想',
    ]; // 在数组里自定义更多关键词,这些关键词在评论内容中,会被脱敏!

    function checkInput() {
        var textarea = document.getElementById("textarea"); // 评论框 <textarea> id 名称,通常为 textarea
        var input = textarea.value; // 获取 textarea 中的文本内容
        var popup = document.getElementById("Lopwon_Popup"); // 获取弹出提示框元素

        for (var i = 0; i < keywords.length; i++) {
            var keyword = keywords[i]; // 获取当前关键词

            if (input.includes(keyword)) {
                popup.style.display = "block"; // 显示弹出提示框
                popup.innerHTML = "检测到敏感词:" + keyword; // 设置提示框内容

                input = input.replace(new RegExp(keyword, "g"), "***"); // 实时替换关键词
                textarea.value = input; // 更新 textarea 中的文本内容

                setTimeout(function() {
                    popup.style.display = "none"; // 2 秒后隐藏提示框
                }, 2000);
                
                break;
            }
        }

        if (input.length === 0) {
            popup.style.display = "none"; // 如果文本内容为空,默认隐藏提示框
        }
    }

    function handlePaste(event) {
        setTimeout(checkInput, 0); // 延迟执行 checkInput 来处理粘贴事件
    }
   
    var textarea = document.getElementById("textarea"); // 获取 textarea 元素并添加事件监听器
    textarea.addEventListener("input", checkInput); // 监听输入事件,触发 checkInput 函数
    textarea.addEventListener("paste", handlePaste); // 监听粘贴事件,触发 handlePaste 函数
    </script>

至此,已可以实现监听评论「遥遥领先」功能。

感谢观赏

支持作者:Buy Me a 冰棒

Store

2 条评论

  1. 点儿 19

    有存在蹭热度嫌疑。 开发方向是否有些偏离起初,没有之前新颖插件或主题,偏向更多浏览量。

    1. Lopwon Lopwon 博主
      @ 点儿

      不存在蹭热度,如果你留意到(刘德华为什么很少演反派)事件,就能明白这个文档实现的功能的用处。

准备下山 准备下山
Snapic Plus v5
使用 Lopwon POP 实现