给博客增加可爱的标题

May 21, 2019 · 博客 · 技术 · 900次阅读

实现效果

当标签隐藏时:

标签隐藏

当标签切回来时:

标签显示

实现代码

header.php 头部加入js全局变量

window.old_title = document.title;

footer.php

<script type="text/javascript">
var titleTime;
document.addEventListener('visibilitychange', function() {
   var isHidden = document.hidden;
   if (isHidden) {
         document.title = 'Σ(っ °Д °;)っ啊,崩溃啦~';
         clearTimeout(titleTime);
       } else {
        document.title = '(‾◡◝) 咦!又好了 | ' + window.old_title ;
        titleTime = setTimeout(function() {
            document.title = window.old_title;
        }, 1000);
    }
 });
</script>

到此基本上完成了,但是如果页面是pjax刷新的,还需要添加下面这一步,否则 点击刷新其他页面后切换标签页再切回来标题会变成刷新前的标签(这么绕)。。反正pjax的加上就对了

以G主题为例子,找到pajx方法,在complete回调中加入:

window.old_title = document.title

大功告成!

上面修改了后出了个小插曲,修改完不生效,检查了一下,CDN缓存导致的js并不是最新的,刷新一下CDN缓存就好了。

没了。

喝杯水

标签:博客,typecho

最后编辑于:2020/02/22 23:15

评论

  1. 2019-07-20 23:16

    请教,具体G主题要怎么操作呢?大佬

    回复
    1. 2019-07-20 23:26

      大佬我搞定了

      回复
      1. 2019-07-20 23:43

        还是有问题

        回复
        1. 2019-07-23 21:08

          不好意思,前几天太忙了,收到留言之后想着有空了再回复结果忙起来就忘记了 ,有什么问题可以互相交流~~~

          回复
  2. 2019-07-20 23:04

    真的好可爱

    回复