前言
由于代码的迭代,导致IE已经完全不支持大部分hexo博客了。但是IE在国内还是拥有着一定的份额,而且还不算是例如360等兼容IE内核的浏览器。
如果这群访客进入我们的博客,那么他只能看到乱糟糟的显示样式,那么怎么能避免这一情况呢?我们只需要对IE内核作出一个跳转,让我们的博客从根本上拒绝IE。
安装kernel.js
首先我们在ROOT/themes/butterfly/source/js
文件夹创建一个kernel.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| function IEVersion() { var userAgent = navigator.userAgent; var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1; if(isIE) { var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); reIE.test(userAgent); var IEVersion; IEVersion = parseFloat(RegExp["$1"]); if (IEVersion == 7) { return 7; } else if(IEVersion == 8) { return 8; } else if(IEVersion == 9) { return 9; } else if(IEVersion == 10) { return 10; } else { return 6; } } else if(isEdge) { return 'edge'; } else if(isIE11) { return 11; }else{ return -1; } } var isIE = IEVersion(); if (isIE == "6" || isIE == "7" || isIE == "8" || isIE == "9" || isIE == "10" || isIE == "11" ){ window.location = "/kernel.html"; }
|
然后在主题文件引入:
1 2 3 4
| inject: head: bottom: + - <script defer data-pjax src="/js/kernel.js"></script>
|
到这步其实基本工作就完成了,你要跳转的不仅可以是.html文件,也可以是webp图片文件。配置方法在kernel.js
的第32行:
1
| window.location = "/kernel.html";
|
配置kernel.html
在ROOT/source
文件夹创建一个kernel.html
内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
| <!DOCTYPE html> <html> <head> <title>内核版本过低</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> body { height: 100%; width: 100%; background: #fefefe url(https://img.cdn.nesxc.com/upload/wordpress/edge-1.webp)center top fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: #2E2F30; font-family: "Montserrat", sans-serif; margin: 0; } footer { position: absolute; bottom: 1%; width: 100%; text-align: center; font-size: .6em; color: #fff } a { color: #fff; } a:hover { color: #d35400; } .dialog { float:none; text-align: center; width: 75%; margin: 40% auto 0; } h1 { font-size: 3.5em; color: #fff; line-height: 1em; } p { font-size: 1.4em; color: #fff; } @media only screen and (max-width: 767px) { .dialog { width: 90%; margin: 60% auto 0; } } </style> </head> <body> <div> <div class="dialog"> <h1>很抱歉我们为您停止了服务</h1> <p>您可能正在使用IE内核浏览我们的网页,但是我们的网页已经不在支持IE内核。我们建议您使用<a href="https://www.microsoft.com/zh-cn/edge">Edg浏览器进行访问</a></p> </div> </div> </body> <footer><a href="https://www.imcharon.com" target="_blank">nesxc</a></footer> </html>
|
注意事项
如果你需要自定义跳转文件,请注意该文件能否在IE内核下显示!~~
打开配置ROOT/_condig.yml
,配置skip_render
跳过渲染。
1 2
| skip_render: + - kernel.html
|
然后正常的hexo三连即可预览效果~
查看效果
IE浏览器显示效果如下图所示:
兼容模式下的QQ浏览器显示效果如下图所示:
参考链接:https://www.imcharon.com/104/