Typecho网站添加复制提醒

ZGGSONG

发布于 2022-09-09 10:10:00

1.7K0

发布于 2022-09-09 10:10:00

文章被收录于专栏：日志

前言

原本在使用handsome主题的时候就在使用复制提醒，感觉在网站上复制内容没有提醒总感觉心里没底，不知道内容是否复制下来了，总是win+v(win)、command+shift+v(mac)来查看，很麻烦。所以复制弹窗还是很有必要的。

效果一

效果二

本站使用效果一，个人感觉不会有那么强的侵入感

使用效果一

这边使用的是layer的web弹层组件，详情查看layer官网

依次进入控制台 -外观-设置外观-主题自定义扩展，将以下代码加入到自定义 HTML 元素拓展-在 body 标签结束前

Javascript Code

<!-- 引入layer.js,也可以替换成别的源 -->
<script src="https://cdn.staticfile.org/layer/3.1.1/layer.js"></script>
<!-- 复制提醒 -->
<script>document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接！');};</script>

可更换成其他源

官方cdn源

https://cdn.staticfile.org/layer/3.1.1/layer.js

jsdelivr源

# 这是放在我自己的仓库
https://cdn.jsdelivr.net/gh/zggsong/cdn/blog/layer3.1.1.js

下载最新版官方js至服务器

打开官网
点击下载
上传至服务器

使用效果二

SweetAlert可以替代JavaScript原生的alert和confirm的弹出提示框，它将提示框进行了美化。所以也可以设置复制弹窗提醒

1、依次进入控制台 -外观-设置外观-主题自定义扩展，将以下代码加入到自定义 HTML 元素拓展-标签: head 头部 (meta 元素后)

Javascript Code

<!-- 引入sweetalert2 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" />
<script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>

2、依次进入控制台 -外观-设置外观-主题自定义扩展，将以下代码加入到自定义 HTML 元素拓展-在 body 标签结束前

Javascript Code

<script>
    document.body.oncopy = function() {
        swal("复制成功！", "ZGGSONG博客提醒您：若要转载请保留原文链接，感谢支持！", "success");
    };
</script>

参考

本文作者：ZGGSONG
本文链接：https://www.zggsong.cn/archives/copy_reminder.html
版权声明：本站所有未注明转载的文章均为原创，并采用CC BY-NV-SA 4.0授权协议，转载请注明来源

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

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

https

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

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

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

登录后参与评论

0 条评论

热度