Hexo中live2d看板娘禁用手机端加载

前言

博客搭建时我加入了一个live2d看板娘，使用的是stevenjoezhang/live2d-widget项目。

前两天我发现手机端虽然看不到，但还是会加载css和js，影响手机端加载速度，项目中也没找到相关配置项，引入一个js便可以解决此问题。

正文

①我这里以Butterfly主题为例，在引入live2d-widget时会在主题配置文件中的inject.bottom里添加:

1	<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

若是将项目下载到了本地，那就应该是添加了:

1	<script src="/live2d-widget/autoload.js"></script> #注意自己的本地路径

②以下载到本地的为例，首先在你的/live2d-widget/src/文件夹下新建一个mobile.js (路径和名称可修改)
内容为:

function browserRedirect() {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; 
    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {} else {
        document.write('<script src="/live2d-widget/autoload.js"></script> ');  //如果不是以上的手机端UA,便加载autoload.js
    }
}
browserRedirect();

然后把①中的:

1	<script src="/live2d-widget/autoload.js"></script>

替换为

1	<script src="/live2d-widget/src/mobile.js"></script>

③看看效果
hexo cl
hexo g
hexo s
三连后，上localhost:4000

浏览器模拟手机端，可以看到live2d-widget中只有mobile.js加载了，其他css和js并没有加载。

问题解决😊

参考链接:https://imbhj.com/37579d1

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。