当浏览部分博客时,复制内容时会弹窗提示保留原文链接。对于访问量大的博客,这也是一个非常不错的功能,但是对于我这个的小博客,实现这个功能主要是为了装比。
Layer 组件
实现此功能,需要用到Layer web弹层组件
Layer 是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
首先到Layer 官网下载,或者直接点击下方的下载按钮
下载后得到的是一个layer-v3.1.1.zip
压缩包,解压后目录结构如下:
需要用的是layer-v3.1.1/layer
里的内容:
将整个layer
文件夹上传到Typecho 主题文件下的 assets/js
目录下,上传后的目录结构如下:
如何使用
首先,需要在主题目录下的header.php
文件里的/head
前加入以下代码:
<script src="/usr/themes/handsome/assets/js/layer/layer.js"></script>
然后在主题设置
- 开发者设置
- 自定义JavaScript
中插入代码:
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接!', function(){
});};
footer.php
加入以下代码:<script type="text/javascript">
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接!', function(){
});};
</script>
保存即可。
效果
点击下方按钮:
可以配合上一篇博文,实现点击自动复制,然后弹窗提示
版权属于:余十一
本文链接:https://www.uud.me/site-notes/layer-js.html
转载时须注明出处及本声明
没效果