前言
本系列的所有修改均基于本系列第一篇中的新增文件(譬如custom.js
),请先自行阅读Hexo瞎折腾系列(1) - 准备工作与简单美化;并按照文章所说自行修改代码或文件。
为网页添加标题崩溃特效
该特效为:当用户离开站点相关的页面时,网页的标题会变成“已崩溃”,网站图标也会改变;当用户重新回到站点页面时才会恢复正常。
实现方式如下:
请在themes/next/source/js/src/custom.js
里加入如下代码:
/* 离开当前页面时修改网页标题,回到当前页面时恢复原来标题 */ window.onload = function() { var OriginTitile = document.title; var titleTime; document.addEventListener('visibilitychange',function() { if(document.hidden) { $('[rel="icon"]').attr('href',"/failure.ico"); $('[rel="shortcut icon"]').attr('href',"/failure.ico"); document.title = '喔唷,崩溃啦!'; clearTimeout(titleTime); } else { $('[rel="icon"]').attr('href',"/favicon-32x32.ico"); $('[rel="shortcut icon"]').attr('href',"/favicon-32x32.ico"); document.title = '咦,页面又好了!'; titleTime = setTimeout(function() { document.title = OriginTitile; },2000); } }); }
然后在站点根目录的/source
目录下添加failure.ico
,作为网站崩溃时显示的图标;如下:
这里的favicon-32x32.ico
是你个人站点的图标,改成你自己的图标就好。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。