Hexo NexT主题美化1.0

常用的主题优化,可参考:

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

这里单独讲讲网页标题崩溃特效:当用户离开站点相关的页面时,网页的标题会变成已崩溃,网站图标也会改变;当用户重新回到站点页面时又恢复正常。

实现方式:

  • /themes/next/source/js/src/目录下新建crash_cheat.js,代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 离开当前页面时修改网页标题,回到当前页面时恢复原来标题 */
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);
}
});
};
  • /themes/next/layout/_layout.swig文件末尾,添加引用:
1
2
<!--崩溃欺骗-->
<script type="text/javascript" src="/js/src/crash_cheat.js"></script>
  • 最后在站点根目录的/themes/next/source/images/目录下添加failure.png,作为网站崩溃时显示的图标,如下:

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

完成的效果如下:

留在当前页:

eqSYff.png

离开当前页:

eqpFgS.png

点击查看

本文标题:Hexo NexT主题美化1.0

文章作者:北宸

发布时间:2019年08月08日 - 18:45:12

最后更新:2019年09月14日 - 01:20:29

原始链接:http://leafjame.github.io/posts/3606203205.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
0%