基于https://sunpma.com/674.html的文章做了二次优化

复制时弹窗提示版权信息

sunpma的版本在复制时弹出的提示是固定的,并且在开启PJAX的时候会有个小bug,切换到首页后复制时依然会触发之前文章内的oncopy事件,所以我对代码进行了修改,效果如下:

image.png

image.png

  1. 修改主题下的component/header.php,引入layer库

    <!-- 弹出层layer -->
    <script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>
  2. 设置外观-PJAX-PJAX回调函数中插入一行JS代码(修复oncopy事件不能重置的bug)

    document.body.oncopy = null;
  3. 修改主题下的libs/Content.php,延迟增加弹窗JS逻辑(解决pjax加载问题)

    $html = "<script>setTimeout(function(){document.body.oncopy = function() {layer.msg('$interpretation');};}, 100)</script>";

改动位置参考:

image.png

image.png

全局彩色标签云

sunpma的版本是通过在模板自带的开发者选项中插入JS代码实现的标签云上色功能,但由于网站主要的跳转逻辑都是pjax刷新的内容,所以需要额外复制代码到pjax回调函数上,否则切换页面后标签云会掉色

  1. 将添加到设置外观-开发者设置-自定义 JavaScript设置外观-PJAX-PJAX回调函数中即可:
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
  tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
  tag.style.backgroundColor = tagsColor;
});

改动位置参考:

image.png

最后修改:2021 年 05 月 22 日
如果觉得我的文章对你有用,请随意赞赏