51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

Hexo+Butterfly主题检测IE内核并进行提示的教程

前言 {#前言}

由于代码的迭代,导致IE已经完全不支持大部分hexo博客了。但是IE在国内还是拥有着一定的份额,而且还不算是例如360等兼容IE内核的浏览器。

如果这群访客进入我们的博客,那么他只能看到乱糟糟的显示样式,那么怎么能避免这一情况呢?我们只需要对IE内核作出一个跳转,让我们的博客从根本上拒绝IE。

安装kernel.js {#安装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; //取得浏览器的userAgent字符串 var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器 var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器 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;//IE版本<=7 } } else if(isEdge) { return 'edge';//edge } else if(isIE11) { return 11; //IE11 }else{ return -1;//不是ie浏览器 } } var isIE = IEVersion(); if (isIE == "6" || isIE == "7" || isIE == "8" || isIE == "9" || isIE == "10" || isIE == "11" ){//判断当前是否是IE浏览器 window.location = "/kernel.html";//如果是IE内核跳转至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";//如果是IE内核跳转至kernel.html |

配置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/


赞(3)
未经允许不得转载:工具盒子 » Hexo+Butterfly主题检测IE内核并进行提示的教程