0%

Hexo-NexT主题添加网页崩溃效果

给网页增加崩溃特效,当离开当前标签页时,标签页上显示网页崩溃提示,当重新回到该标签页时,显示网页正常。

  1. 首先在next/source/js/src文件夹下创建文件crash_cheat.js,加入如下的特效代码:

    
     var OriginTitle = document.title;
     var titleTime;
     document.addEventListener('visibilitychange', function () {
         if (document.hidden) {
             $('[rel="icon"]').attr('href', "/images/favicon-32x32-next1.png");
             document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
             clearTimeout(titleTime);
         }
         else {
             $('[rel="icon"]').attr('href', "/images/favicon-32x32-next1.png");
             document.title = '(ฅ>ω<*ฅ) 来了老弟~' + OriginTitle;
             titleTime = setTimeout(function () {
                 document.title = OriginTitle;
             }, 2000);
         }
     });
    
  2. next/layout/_layout.swig文件中,在head标签中添加对该js文件的引用:

        <!-- 引入网页奔溃效果 -->
        <script type="text/javascript" src="/js/src/crash_cheat.js"></script>
    
-------------------本文结束 感谢您的阅读-------------------

本文标题:Hexo-NexT主题添加网页崩溃效果

文章作者:Sucre

发布时间:2020年05月31日 - 09:08:31

最后更新:2020年05月31日 - 10:04:53

原始链接:https://tangtangsama.github.io/article/95f06cdc.html/

非商业性使用-转载请保留原文链接及作者。

感谢您的支持和鼓励!