Hexo NexT主题美化1.0

Hexo NexT 主题美化2.0
hexo的next主题个性化教程:打造炫酷网站
基于Hexo搭建个人网站——进阶篇(从入门到入土)
基于hexo搭建个人免费网站——自定义页面样式

以上所列的主题美化效果都不错，可以作个参考，这里单独记录一下网页标题崩溃特效：当用户离开站点相关的页面时，网页的标题会变成已崩溃，网站图标也会改变；当用户重新回到站点页面时又恢复正常。

实现方式：

• 在 next/source/js/src/ 目录下新建 crash_cheat.js，代码如下：

/* 离开当前页面时修改网页标题，回到当前页面时恢复原来标题 */
window.onload = function() {
  var OriginTitile = document.title;
  var titleTime;
  document.addEventListener('visibilitychange', function() {
    if(document.hidden) {
      $('[rel="icon"]').attr('href', "../../images/failure.png");
      $('[rel="shortcut icon"]').attr('href', "../../images/failure.png");
      document.title = '(●—●)喔哟，崩溃啦！';
      clearTimeout(titleTime);
    } else {
      $('[rel="icon"]').attr('href', "../../images/favicon-32x32-next.png");
      $('[rel="shortcut icon"]').attr('href', "../../images/favicon-32x32-next.png");
      document.title = '(/≧▽≦/)咦！页面又好了！';
      titleTime = setTimeout(function() {
        document.title = OriginTitile;
      }, 2000);
    }
  });
};

• 在 next/layout/_layout.swig 文件末尾，添加引用：

<!--崩溃欺骗-->
<script type="text/javascript" src="/js/src/crash_cheat.js"></script>

• 最后在 next/source/images/ 目录下添加 failure.png，作为网站崩溃时显示的图标，如下：

这里的 favicon-32x32-next.png 是你个人站点的图标

完成的效果如下：

留在当前页：

离开当前页：