【Sakurairo 主题美化】鼠标特效和浏览器动态标题

2024-3-30 10:54

760

教程

351 字

4 分钟

鼠标点击有烟花绽放效果

下载JS文件

首先下载下面js文件解压后放到主题文件夹的js目录里面；

【点击下载】

修改footer.php

将下面这段代码复制粘贴到主题footer.php文件最后一个</body>标签前即可。

<!--给WordPress网站添加鼠标点击爆炸五颜六色特效-->
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
<script type="text/javascript" src="https://blog.gyhwd.top/wp-content/themes/Sakurairo/js/djtx.js"></script>

Tip：将第二行的代码中的路径改为你上传目录的绝对路径，格式：http://你的域名/wp-content/themes/主题名称/js/djtx.js。

如果是 Sakurairo 主题的更简单是直接在Sakurairo 主题设置中的【全局设置】按照图示添加，这样不受主题更新的影响。😂

效果展示

浏览器动态标题

所谓动态标题是指当页面切换到其他窗口，即当前页面被隐藏时，浏览器的标签页的标题会发生变化。

修改footer.php

将下面代码放到 footer.php 文件中最后一个 </body> 标签前即可。

<script>// <!-- 标题动态切换代码 Start -->
window.onload = function () {
  let hour = new Date().getHours()
  let str = ''
  if (hour < 6) {
    str = '修仙中……'
  } else if (hour < 9) {
    str = '早上'
  } else if (hour < 12) {
    str = '上午'
  } else if (hour < 14) {
    str = '中午'
  } else if (hour < 17) {
    str = '下午'
  } else if (hour < 19) {
    str = '傍晚'
  } else if (hour < 22) {
    str = '晚上'
  } else {
    str = '夜深了，要早点休息哦！'
  }

  function c () {
    document.title = document[a] ? '㋡ Hi,小伙伴,' + str + '好! [' + d + ']' : d
  }

  let a = document.title
  let b = document.title
  let d = document.title
  typeof document.hidden !== 'undefined' ? (a = 'hidden', b = 'visibilitychange')
    : typeof document.mozHidden !== 'undefined' ? (a = 'mozHidden', b = 'mozvisibilitychange')
    : typeof document.webkitHidden !== 'undefined' && (a = 'webkitHidden', b = 'webkitvisibilitychange')
  typeof document.addEventListener === 'undefined' && typeof document[a] === 'undefined' || document.addEventListener(b, c, !1)
}
</script>

或者按照下图直接在Sakurairo 主题设置里的【全局设置】中【页尾设置】添加即可。同时这样不受主题更新的影响。