当浏览部分博客时,复制内容时会弹窗提示保留原文链接。对于访问量大的博客,这也是一个非常不错的功能,但是对于我这个的小博客,实现这个功能主要是为了装比。

Layer 组件

实现此功能,需要用到Layer web弹层组件

Layer 是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。

首先到Layer 官网下载,或者直接点击下方的下载按钮

uud.me-layer-1


下载后得到的是一个layer-v3.1.1.zip 压缩包,解压后目录结构如下:

uud.me-layer-2

需要用的是layer-v3.1.1/layer里的内容:

uud.me-layer-3

将整个layer文件夹上传到Typecho 主题文件下的 assets/js目录下,上传后的目录结构如下:

uud.me-layer-4

如何使用

首先,需要在主题目录下的header.php文件里的/head前加入以下代码:

<script src="/usr/themes/handsome/assets/js/layer/layer.js"></script>

不同的主题,具体路径有所不同,需要你将上面代码中的handsome 换为你的主题名称

然后在主题设置 - 开发者设置 - 自定义JavaScript 中插入代码:

document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接!', function(){
   });};

一般主题都会有这个设置,如果没有,你也可以手动到主题目录下的footer.php加入以下代码:

<script type="text/javascript">
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接!', function(){
   });};
</script>

保存即可。

效果

点击下方按钮:

可以配合上一篇博文,实现点击自动复制,然后弹窗提示

Last modification:January 31st, 2019 at 04:19 pm
如果觉得我的文章对你有用,请随意赞赏