博客看板娘增强版

前言

之前我写过一篇关于hexo博客插入live2d的教程，传送门：让你的博客充满生气之Live2D

但是由于插件和模型的限制，能应用的看板娘emmm，都不是很满意，或者说好看的很少，所以能不能把别的live2d模型应用到博客里呢，经过缘星星丶大佬的指导，我找到了方法，写在这里以作记录

本文内容无需下载插件哦~

文章作者: 缘星星丶

文章链接: http://fxlabtinystar.cn/2020/08/14/Live2dAndHexo/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自缘丶星！

正文

下载完成之后我们只需要里面的live2d文件夹：

把这个文件夹复制到博客根目录下的 source 下

修改主题配置

我所写的方法适用于本Butterfly主题，其他引入方式请参考缘星星大佬的原文或者Github的README

修改 butterfly.yml ，在 inject.bottom 里引入以下配置：

# 看板娘begin
- <link rel="stylesheet" href="/live2d/css/live2d.css" /><div id="landlord"> <div class="message" style="opacity:0.5"></div> <canvas id="live2d" width="280" height="250" class="live2d"></canvas> <div class="hide-button"><font color="#FFFFFF">隐藏</font></div></div>
- <script type="text/javascript"> var message_Path = ”/live2d/“</script>
- <script type="text/javascript"> var home_Path = "https://www.dabailuobo.com/" </script>
- <script type="text/javascript" src="/live2d/js/live2d.js"></script>
- <script type="text/javascript" src="/live2d/js/message.js"></script>
- <script type="text/javascript"> loadlive2d("live2d", "/live2d/model/tia/model.json"); </script>
# 看板娘end

需要注意的是相关路径，第三行中的域名配置就写你自己的，注意域名后面必须加上 / ，不然会有神奇的bug哦

其他

如果想要修改模型，将你下载好的模型文件放入 live2d/model/ 下，然后修改上面代码的第六行的路径名称即可。

如果想要修改对话框中的对话内容，请查看 live2d/js/message.js 自己做出相应的修改即可

如果想要修改位置和大小，请修改上面代码的第一行，中有 width 和 height ，还有透明度 opacity

于 model.json 中配置看板娘的动作，js中拓展你所需要的功能…( 对应节日的提醒什么的

更强大的功能请自行查阅：https://github.com/stevenjoezhang/live2d-widget

效果

拜拜，下次更新见~

2020.8.15优化更新

虽然看板娘在移动端不会显示，但是js和css仍然会加载，导致移动端的网页加载非常慢，所以加了这次更新加了设备识别，只要是移动端默认不加载看板娘

首先在你的 live2d/js/ 下新建一个 index.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('<link rel="stylesheet" href="/live2d/css/live2d.css" /><div id="landlord"> <div class="message" style="opacity:0.5"></div> <canvas id="live2d" width="280" height="250" class="live2d"></canvas> <div class="hide-button"><font color="#FFFFFF">隐藏</font></div></div>');
        document.write('<script type="text/javascript"> var message_Path = "/live2d/"</script>');
        document.write('<script type="text/javascript"> var home_Path = "https://www.dabailuobo.com/" </script>');
        document.write('<script type="text/javascript" src="/live2d/js/live2d.js"></script>');
        document.write('<script type="text/javascript" src="/live2d/js/message.js"></script>');
        document.write('<script type="text/javascript"> loadlive2d("live2d", "/live2d/model/tia/model.json");</script>');
    }
}
browserRedirect();