前言:
由于代码的迭代,导致IE已经完全不支持大部分hexo博客了。但是IE在国内还是拥有着一定的份额,而且还不算是例如360等兼容IE内核的浏览器。
如果这群访客进入我们的博客,那么他只能看到乱糟糟的一团玩意:
那么怎么能避免这一情况呢?我们只需要对IE内核作出一个跳转,让我们的博客从根本上拒绝IE。
安装kernel.js
首先我们在ROOT/themes/butterfly/source/js文件夹创建一个kernel.js
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
}
然后在主题文件引入:
inject:
head:
bottom:
+ - <script defer data-pjax src="/js/kernel.js"></script>
到这步其实基本工作就完成了,你要跳转的不仅可以使.html文件,也可以说webp图片文件。配置方法在kernel.js的第32行:
window.location = "/kernel.html";//如果是IE内核跳转至kernel.html
配置kernel.html
在ROOT/source文件夹创建一个kernel.html内容如下:
<!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跳过渲染。
skip_render:
+ - kernel.html
然后正常的hexo三连即可预览效果~
效果
IE浏览器
兼容模式下的QQ浏览器
© 版权声明
THE END
- 最新
- 最热
只看作者