Butterfly检测IE内核跳转教程

Butterfly检测IE内核跳转教程

前言:

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

如果这群访客进入我们的博客,那么他只能看到乱糟糟的一团玩意:

image-20210119224222728

那么怎么能避免这一情况呢?我们只需要对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.nesxc.com" target="_blank">nesxc</a></footer>
</html>

注意:

如果你需要自定义跳转文件,请注意该文件能否在IE内核下显示!~~

打开**ROOT/_condig.yml

配置skip_render跳过渲染。

skip_render:
+ - kernel.html

然后正常的hexo三连即可预览效果~

效果

image-20210120000043746

IE浏览器

image-20210120000124517

兼容模式下的QQ浏览器

© 版权声明
THE END
点赞12 分享
评论 共2条
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片
    • 头像空梦0