前言

由于代码的迭代,导致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; //取得浏览器的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

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/