前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >网页离开时改变标题“崩溃欺骗”

网页离开时改变标题“崩溃欺骗”

作者头像
Cell
发布2022-02-25 15:27:44
发布2022-02-25 15:27:44
1.2K0
举报
文章被收录于专栏:Cell的前端专栏Cell的前端专栏

从暑假到现在有好几个小伙伴问我博客的标题怎么变来变去的,不想再和每个人都说一遍了,耽误时间,索性写一下。

创建一个 js 文件

我们先创建一个 js 文件,我们用记事本就好了,然后改个文件名,不妨就叫crash-cheat.js吧,你们可以随意! 然后把文件放到 source 文件夹的 js 文件夹的 src 里面。(我用的 next 主题,放这里统一存放,其他主题随意)

崩溃欺骗 (Jquery 版)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if (document.hidden) { $('[rel="icon"]').attr('href', "https://i.loli.net/2018/08/24/5b7fcb00ed9bf.png"); document.title = '怎么回事╭(°A°`)╮'; clearTimeout(titleTime); } else { $("[rel='icon']").attr('href', "https://i.loli.net/2018/09/25/5baa4f21661e7.png"); document.title = '小老弟 (ฅ>ω<*ฅ)'; titleTime = setTimeout(function () { document.title = OriginTitle; $("[rel='icon']").attr('href', "/images/favicon-32x32-next.png"); }, 2000); } });

崩溃欺骗 (JS 版)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var oldTitle = document.title; var titleTime; //標題恢復計時器 document.addEventListener("visibilitychange", function () { if (document.hidden) { document.querySelector("[rel='icon']").setAttribute("href", "/images/icons/favicon-32.png"); document.title = "網站崩潰了!"; clearTimeout(titleTime); } else { document.title = "其實並沒有!"; document.querySelector("[rel='icon']").setAttribute("href", "/images/icons/crash.png"); titleTime = setTimeout(function () { document.title = oldTitle; }, 1000); } });

使用

hexo\themes\hexo-theme-next\layout文件路径找到layout.swig文件,其他有些主题用的是.ejs后缀,一样的。 然后打开文件,在<body></body>之间加入调用刚刚的 js。

1

<script type="text/javascript" src="/js/src/crash-cheat.js"></script>

重新部署博客就可以了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-09-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 创建一个 js 文件
  • 使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档