CoreNext主题美化:复制提示版权

前言:

在网络高度发达的今天,复制和转载文章已成为一种常态。然而,这种便捷的行为却时常触碰到版权的红线,给原创作者带来不应有的损失。为了捍卫原创者的权益,众多网站开始采取积极措施,当读者尝试复制文章内容时,会触发版权提示框,以提醒用户尊重并保护原创作者的版权。

代码①:

通过SweetAlert美化的提示框,加载JS和CSS,但会影响速度:

// 版权提示_www.xjvae.com
function zm_copyright_tips() {
 echo '<link rel="stylesheet" type="text/css" rel="external nofollow" target="_blank" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css">';
 echo '<script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>';
 echo '<script>document.body.oncopy = function() { swal("复制成功!", "转载请务必保留原文链接,申明来源,谢谢合作!!","success");};</script>';
}
add_action( 'wp_footer', 'zm_copyright_tips', 100 );

使用方法:

主题根目录 ->  functions.php末尾

 实际效果①:

图片[1]-CoreNext主题美化:复制提示版权-一闲笔记

代码②:

//检测复制版权提示
function copyright_reminder() {
?>
<script type="text/javascript">
document.body.oncopy=function(){alert('复制成功,若要转载请务必保留原文链接,谢谢合作!');}
</script>
<?php
}
add_action('wp_footer','copyright_reminder');
//结束

 使用方法:

主题根目录 ->  functions.php末尾。

实际效果②:

图片[2]-CoreNext主题美化:复制提示版权-一闲笔记

代码③:(弹窗3秒后自动消失)

<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js">
    </script>
    <script type="text/javascript">document.body.oncopy = function() {
            layer.msg('复制成功,若要转载请务必保留出处!');};
</script>

使用方法:

引入JS,将代码复制添加至 / body前面的代码里,一般在footer.php,使用的是layui layer/3.1.1/layer.js web 弹层组件。

也可将代码插入主题设置 -> 插入代码 -> 页头代码。

 实际效果:

图片[3]-CoreNext主题美化:复制提示版权-一闲笔记

 

ps:文章复制添加来源链接

  <script ="text/javascript">function addLink() {
    var selection = window.getSelection();
    pagelink = ". 原文出自[xjvae博客] 转载请保留原文链接: " + document.location.href;
    copytext = selection + pagelink;
    newdiv = document.createElement('div');
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';
    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
    window.setTimeout(function () {
        document.body.removeChild(newdiv);
    }, 100);
}
document.oncopy = addLink;</script>

使用方法:

添加至主题文件夹的header.php中即可。【CoreNext/template/views】

实际效果:

图片[4]-CoreNext主题美化:复制提示版权-一闲笔记

代码④:(利用element显示Notification通知功能来实现)

  1. 安装Node.js版本管理器:进入宝塔 –>软件商店 –>Node.js版本管理器 2.1 –>设置 –>安装v16.9.0 –>命令行版本选择v16.9.0 图片[5]-CoreNext主题美化:复制提示版权-一闲笔记
  2. 安装element UI:进入宝塔文件 –>找到网站 –>终端 –>输入
    npm install element-ui --save

    出现黄色警告无视。这时刷新文件或网页会出现node_modules文件夹,至此element UI已安装完成。图片[6]-CoreNext主题美化:复制提示版权-一闲笔记

  3. 添加js代码(在任意引用全局js的文件内添加代码;或者直接新建js,以脚本方式运行)
    /* 复制提醒 */
    document.addEventListener("copy",function(e){
        new Vue({
            data:function(){
                this.$notify({
                    title:"嘿!复制成功",
                    message:"若要转载请务必保留原文链接!爱你呦~",
                    position: 'bottom-right',
                    offset: 50,
                    showClose: false,
                    type:"success"
                });
                return{visible:false}
            }
        })
    })
  4. 将代码插入主题设置 -> 插入代码 -> 页头代码
    <!-- 引入VUE -->
    <script src="你的站点/node_modules/vue/dist/vue.min.js"></script>
    <!-- 引入样式 -->
    <script src="你的站点/node_modules/element-ui/lib/index.js"></script>
    <!-- 引入组件库 -->
    <link rel="stylesheet" href="你的站点/node_modules/element-ui/packages/theme-chalk/lib/index.css">
    <!-- 运行脚本 -->
    <script src="你的站点/wp-content/themes/CoreNext/static/js/vue.js"></script>

实际效果:

图片[7]-CoreNext主题美化:复制提示版权-一闲笔记

ps:添加使用以下代码后记得清理本地缓存

/* 禁用F12按键并提醒 */
document.onkeydown = function () {
if (window.event && window.event.keyCode == 123) {
  event.keyCode = 0;
  event.returnValue = false;
    new Vue({
            data:function(){
                this.$notify({
                    title:"嘿!别瞎按",
                    message:"坏孩子!",
                    position: 'bottom-right',
                    offset: 50,
                    showClose: false,
                    type:"error"
                });
                return{visible:false}
            }
        })
  return false;
}
};
/* 禁用右键菜单并提醒 */
document.oncontextmenu = function () {
new Vue({
    data:function(){
        this.$notify({
            title:"嘿!没有右键菜单",
            message:"复制请用键盘快捷键",
            position: 'bottom-right',
            offset: 50,
            showClose: false,
            type:"warning"
        });
        return{visible:false}
    }
})
return false;
}
//禁用左键选择
      document.onselectstart = function () {
        return false;
      }
//禁用复制
      document.oncopy = function () {
        return false;
     }
//禁用Ctrl+Shift+I
        if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) {
          return false;
        }

来源参考:

好软猫https://www.haoruanmao.com

路羽博客:https://www.luyuz.cn/

你的明明呐丶:https://cloud.tencent.com/developer/article/2031306

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容