Butterfly检测IE内核跳转教程

2022-03-01 10:16:20 浏览数 (1)

前言:

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

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

那么怎么能避免这一情况呢？我们只需要对IE内核作出一个跳转，让我们的博客从根本上拒绝IE。

安装kernel.js

首先我们在ROOT/themes/butterfly/source/js文件夹创建一个kernel.js

代码语言：javascript复制
  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
  }

然后在主题文件引入:

代码语言：javascript复制
inject:
  head:
  bottom:
    - <script defer data-pjax src="/js/kernel.js"></script>

到这步其实基本工作就完成了，你要跳转的不仅可以使.html文件，也可以说webp图片文件。配置方法在kernel.js的第32行：

代码语言：javascript复制
window.location = "/kernel.html";//如果是IE内核跳转至kernel.html

配置kernel.html

在ROOT/source文件夹创建一个kernel.html内容如下:

代码语言：javascript复制
<!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://cdn-1.nesxc.com/cdn-3/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跳过渲染。

代码语言：javascript复制
skip_render:
  - kernel.html

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

效果

IE浏览器

兼容模式下的QQ浏览器

温馨提示：oops

温馨提示：本文最后更新于2022-02-06 14:36:19，某些文章具有时效性，若有错误或已失效，请在下方留言或联系小N同学。

kernel html hexo javascript

0 人点赞