Hexo瞎折腾系列(9) - 网页标题崩溃特效
前言
本系列的所有修改均基于本系列第一篇中的新增文件(譬如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是你个人站点的图标,改成你自己的图标就好。
Hexo瞎折腾系列(9) - 网页标题崩溃特效的更多相关文章
- Hexo瞎折腾系列(1) - 准备工作与简单美化
前言 网上有不少相关的帖子,不过版本会比较旧,而不同版本可能存在代码不同的问题,不过大部分还是大同小异,本系列就不啰嗦重复了,基本只会按照本人所使用的版本以及个人所使用到的内容来进行介绍. 该系列是对 ...
- Hexo瞎折腾系列(8) - 添加评论系统
前言 Hexo的NexT主题本身就集成了一些评论系统,多说啊之类的已经关闭服务的略过不提,目前比较多人用的有畅言.来必力livere.Gitment.Gitalk.Disqus等. 我刚用的评论系统的 ...
- Hexo瞎折腾系列(7) - Coding Pages申请SSL/TLS证书错误
问题 今天我的个人站点SSL/TLS证书到期,我的证书是由Coding Pages提供的,每次申请成功后有效期是三个月,证书到期后可以继续免费申请.但是当我登陆进入Coding Pages服务的后台并 ...
- Hexo瞎折腾系列(6) - 将博客同时部署到Github和Coding
前言 由于本人只是将Hexo博客同时部署到 Github 和 Coding.net ,所以这里只介绍怎么同时部署到这两个网站的pages. 之所以选择这两个网站,是因为国外用户可以访问 Github, ...
- Hexo瞎折腾系列(5) - 使用hexo-neat插件压缩页面静态资源
为什么要压缩页面静态资源 对于个人博客来说,优化页面的访问速度是很有必要的,如果打开你的个人站点,加载个首页就要十几秒,页面长时间处于空白状态,想必没什么人能够忍受得了吧.我个人觉得,如果能把页面的加 ...
- Hexo瞎折腾系列(2) - 添加背景图片轮播
动态背景图片插件jquery-backstretch jquery-backstretch是一款简单的jQuery插件,可以用来设置动态的背景图片,以下是官方网站的介绍. A simple jQuer ...
- Hexo瞎折腾系列(4) - 站点首页不显示文章全文
文章摘要设置 打开主题配置文件 _config.yml 文件,找到如下: # Automatically Excerpt. Not recommend. # Please use <!-- mo ...
- Hexo瞎折腾系列(3) - 添加GitHub彩带和GitHub Corner
页面右上角添加GitHub彩带 你可以在这里找到一共12种样式的GitHub彩带,复制其中的超链代码. 在themes\next\layout\_layout.swig目录下找到头部彩带相关的代码: ...
- 瞎折腾-CentOS 7.4 编译4.16.2版kernel 并安装
CentOS 7.4下 原内核版本: 3.10.0-693.el7.x86_64 改后内核版本: 4.16.2 系统版本: CentOS-7-x86_64-Minimal-1708.iso 运行环境: ...
随机推荐
- Java面试题10(如何取到set集合的第一个元素)
1.如何取到set集合的第一个元素. public static void main(String[] args) { Set set = new HashSet(); set.add("x ...
- 【LeetCode】010. Regular Expression Matching
Implement regular expression matching with support for '.' and '*'. '.' Matches any single character ...
- hdu 5909 Tree Cutting —— 点分治
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5909 点分治,每次的 rt 是必选的点: 考虑必须选根的一个连通块,可以DP,决策就是在每个子树中决定选不 ...
- AD9 如何画4层pcb板
新建的PCB文件默认的是2层板,教你怎么设置4层甚至更多层板. 在工具栏点击Design-->Layer Stack Manager.进入之后显示的是两层板,添加为4层板,一般是先点top la ...
- IIS备份和还原
当我们电脑系统有大量的站点和虚拟目录的时候,电脑因为种种原因需要重做系统,那么重装系统后这些站点我们是否只能一个一个的添加,如果有成百上千个站点呢,任务量可想而知,本文将介绍如何备份和还原window ...
- [Uva12260]Free Goodies(dp+贪心)
解题关键:先对p进行排序,消除p的影响,然后对w进行01背包即可.注意p对w的约束.j<=(cur+1)/2 #include<cstdio> #include<cstring ...
- nodejs中 underscore 包有什么作用
Underscore一个JavaScript实用库,提供了一整套函数式变成有用的实用功能,但是没有扩展任何JavaScript内置对象.它是这个问题的答案:“如果我在一个空白的HTML页面前坐下, 并 ...
- Ubuntu 使用 heirloom-mail 调用外部邮箱 SMTP 服务器发送邮件
使用本地服务发邮件,经常被过滤掉而且占用资源,发送成功率不高.所以使用外部SMTP服务器发送邮件成为了需求. SMTP认证的目的是为了使用户避免受到垃圾邮件的侵扰,简单地说就是要求必须在提供了账户名和 ...
- 17、GATK使用简介 Part2/2
转载:http://blog.sina.com.cn/s/blog_6721167201018jik.html Change Logs: 13/01/12: 增加了一篇文献,外加一些无聊的修改.12/ ...
- 1、linux-wget
1.常用下载与参数 wget + 空格 + 要下载文件的url路径 例如: # wget linuxsense.org/xxxx/xxx.tar.gz">http://www.linu ...