Hexo瞎折腾系列(9) - 网页标题崩溃特效

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lewky_liu/article/details/90575466

前言

本系列的所有修改均基于本系列第一篇中的新增文件(譬如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,作为网站崩溃时显示的图标;如下:

image

这里的favicon-32x32.ico是你个人站点的图标,改成你自己的图标就好。

展开阅读全文

没有更多推荐了,返回首页