MENU

Typecho网站添加复制提醒

July 23, 2020 • Read: 371 • 建站

前言

原本在使用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>

可更换成其他源

https://cdn.staticfile.org/layer/3.1.1/layer.js
# 这是放在我自己的仓库
https://cdn.jsdelivr.net/gh/zggsong/cdn/blog/layer3.1.1.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授权协议,转载请注明来源

Archives Tip
QR Code for this page
Tipping QR Code