zblog网站添加文章复制版权信息提示教程
时间:2022年05月26日
/来源:网络
/编辑:佚名
【Z-BLOG教程】复制网站文章内容弹窗提示+末尾自动添加版权信息(网站添加文章复制版权信息提示教程)
复制文章内容末尾自动添加版权信息这是很久以前的想法了,每次浏览一些技术文章,复制一些文本文字末尾都有添加版权信息,觉得非常的酷!但一直没有时间来写,今天发一点时间来水一篇文章。
本教程适用于所有类型网站,不只是zblog——除非你网站有复制弹窗了,可能会报错!
复制网站文章内容+弹窗提示+末尾自动添加版权信息主要是由jQuery(核心) + Layui.js(弹窗提示) + CSS(样式美化)设计而成,非常的优雅。当然jQuery代码部分还是借鉴大佬的一些(懒得写)!代码中还有些bug,望理解!
en......如果您喜欢,就评论获取(避免白嫖),关注“78模板网”,更多精彩教程等着你!
使用教程
如果你网站有了复制弹窗提示,请您关掉或者删掉(请备份,在进行删除代码)
第一步:添加JS代码
现在大部分主题都有主题设置,只需在后台的主题设置中“自定义头部HTML代码”或者“自定义底部HTML代码”中把下面的代码复制进去即可(注意:复制进去后,需删除末尾的自动版权声明)。Layui.js主要是用来复制弹窗提示的,如果您的网站已经导入有这个layui.js的话,无需再次导入,把代码中调用的CDN-js删掉就好啦。
JavaScript复制
<script type="text/javascript" src="https://www.78moban.com/zb_users/upload/js/layui.min.js"></script>
<script type="text/javascript">
/**复制自动添加版权声明*/
$(document).on("copy", function(e) {
var selected = window.getSelection();
var selectedText = selected.toString().replace(/\n/g, "<br>");
var copyFooter =
"<br>-----------------------<br>著作权归作者所有。<br>" +
"商业转载请联系作者获得授权,非商业转载请注明出处。<br>" +
"作者:雾海梦曦<br> 源地址:" +
document.location.href +
"<br>来源:78模板网<br>© 版权声明:本文为博主原创文章,转载请务必保留原文链接!";
if (document.location.pathname === "/") {
var copyFooter =
"<br>-----------------------<br>" +
"来源:78模板网<br> 源地址:" +
document.location.href +
"<br>© 版权声明:商业转载请联系作者获得授权,非商业转载请注明出处。<br>";
}
var msgContent =
'<span style="font-weight: 700;margin: 0 !important;">【78模板网(www.78moban.com)】<br>复制成功,若要转载请务必保留原文链接</span>' + copyFooter;
layer.msg(msgContent, {
time: 2000,
shift: 2,
shade: 0.3,
skin: "wiiuii-layer-mode"
});
var copyHolder = $("<div>", {
id: "temp",
html: selectedText + copyFooter,
style: {
position: "absolute",
left: "-99999px"
}
});
$("body").append(copyHolder);
selected.selectAllChildren(copyHolder[0]);
window.setTimeout(function() {
copyHolder.remove();
}, 0);
});
</script>
注:自己修改代码中【文字部分】成自己的即可!
第二步:添加CSS代码
CSS代码是弹窗提示样式,在主题设置-自定义CSS样式中复制添加进去就好啦!
CSS复制
/*layui弹窗样式美化*/
.wiiuii-layer-mode{
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border: none !important;
border-radius: 8px !important;
}
~教程已经隐藏起来啦,评论获取吧!~
演示效果图 或者复制文章即可弹出提示
layui.min.js
下载地址:
链接: https://pan.baidu.com/s/1_POEge4m_dygFcqDfk1YsA 提取码: g3bz
复制文章内容末尾自动添加版权信息这是很久以前的想法了,每次浏览一些技术文章,复制一些文本文字末尾都有添加版权信息,觉得非常的酷!但一直没有时间来写,今天发一点时间来水一篇文章。
本教程适用于所有类型网站,不只是zblog——除非你网站有复制弹窗了,可能会报错!
复制网站文章内容+弹窗提示+末尾自动添加版权信息主要是由jQuery(核心) + Layui.js(弹窗提示) + CSS(样式美化)设计而成,非常的优雅。当然jQuery代码部分还是借鉴大佬的一些(懒得写)!代码中还有些bug,望理解!
en......如果您喜欢,就评论获取(避免白嫖),关注“78模板网”,更多精彩教程等着你!
使用教程
如果你网站有了复制弹窗提示,请您关掉或者删掉(请备份,在进行删除代码)
第一步:添加JS代码
现在大部分主题都有主题设置,只需在后台的主题设置中“自定义头部HTML代码”或者“自定义底部HTML代码”中把下面的代码复制进去即可(注意:复制进去后,需删除末尾的自动版权声明)。Layui.js主要是用来复制弹窗提示的,如果您的网站已经导入有这个layui.js的话,无需再次导入,把代码中调用的CDN-js删掉就好啦。
JavaScript复制
<script type="text/javascript" src="https://www.78moban.com/zb_users/upload/js/layui.min.js"></script>
<script type="text/javascript">
/**复制自动添加版权声明*/
$(document).on("copy", function(e) {
var selected = window.getSelection();
var selectedText = selected.toString().replace(/\n/g, "<br>");
var copyFooter =
"<br>-----------------------<br>著作权归作者所有。<br>" +
"商业转载请联系作者获得授权,非商业转载请注明出处。<br>" +
"作者:雾海梦曦<br> 源地址:" +
document.location.href +
"<br>来源:78模板网<br>© 版权声明:本文为博主原创文章,转载请务必保留原文链接!";
if (document.location.pathname === "/") {
var copyFooter =
"<br>-----------------------<br>" +
"来源:78模板网<br> 源地址:" +
document.location.href +
"<br>© 版权声明:商业转载请联系作者获得授权,非商业转载请注明出处。<br>";
}
var msgContent =
'<span style="font-weight: 700;margin: 0 !important;">【78模板网(www.78moban.com)】<br>复制成功,若要转载请务必保留原文链接</span>' + copyFooter;
layer.msg(msgContent, {
time: 2000,
shift: 2,
shade: 0.3,
skin: "wiiuii-layer-mode"
});
var copyHolder = $("<div>", {
id: "temp",
html: selectedText + copyFooter,
style: {
position: "absolute",
left: "-99999px"
}
});
$("body").append(copyHolder);
selected.selectAllChildren(copyHolder[0]);
window.setTimeout(function() {
copyHolder.remove();
}, 0);
});
</script>
注:自己修改代码中【文字部分】成自己的即可!
第二步:添加CSS代码
CSS代码是弹窗提示样式,在主题设置-自定义CSS样式中复制添加进去就好啦!
CSS复制
/*layui弹窗样式美化*/
.wiiuii-layer-mode{
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border: none !important;
border-radius: 8px !important;
}
~教程已经隐藏起来啦,评论获取吧!~
演示效果图 或者复制文章即可弹出提示
layui.min.js
下载地址:
链接: https://pan.baidu.com/s/1_POEge4m_dygFcqDfk1YsA 提取码: g3bz
新闻资讯 更多
热门文章
- 178Moban源码谈谈免费源码与收费源码的区别
- 2帝国CMS忘记后台登陆用户名、密码、认证码的解决方法
- 3帝国CMS(EmpireCMS) v7.5后台任意代码执行漏洞及具体修复方法
- 4帝国CMS和WordPress 哪个好?哪个适合建站?
- 5如何解决Discuz的密码错误次数过多请15分钟后登陆的问题
- 6帝国cms灵动标签取得内容和栏目链接地址
- 7emlog pro 注册码“开心”教程(如果有一天,emlog官方版 或者 emlog免费版 跑路了,那用户怎么办?)
- 8织梦CMS在nginx下设置伪静态方法(附nginx伪静态规则)
- 9帝国cms后台登录出现”您还未登录”怎么解决?
- 10帝国cms7.5忘记登录密码 和忘记登录认证码以及多次登录 失败被锁定解决办法