我的live2d配置

发表于 | 分类于

给hexo加上live2d只能说是自己作为死宅的本能反应吧= =，在别人的网站上看过之后总是觉得羨ましい，然后到处找文章想给自己也加上，本来很简单的事情还用了大半天( I very vegetables )，这次把步骤写上来。也算做个备份吧，指不定那天忘了呢。

hexo的官方插件

hexo 的官方有提供名为 hexo-helper-live2d 的插件使用如下安装命令就可以安装

npm install –save hexo-helper-live2d

随后在 Hexo 的 _config.yml 文件中添加如下配置(据说是可以配在主题的 _config.yml 中的，但是我没试过orz).
示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
live2d:
 enable: true   
 scriptFrom: local
 pluginRootPath: live2dw/
 pluginJsPath: lib/
 pluginModelPath: assets/
 tagMode: false
 debug: false
 model:
   use: live2d-widget-model-wanko  //启用的模型目录
 display:
   position: right
   width: 150
   height: 300
 mobile:
   show: true

这样一个默认的模型就配好了，默认是这样的:
hexo-default

添加互动：

默认的模型只有很简单的动画，在别人网站里看到的都是能互动对话的，经过查阅找到了大佬的教程把萌萌哒的看板娘抱回家。 (到这里需要把之前配置文件中的 live2d.enable 修改为 false )
根据步骤来，jquery在主题中是已经存在的直接跳过，将项目下载下来，将autoload.js、 live2d.min.js、waifu-tips.js、waifu-tips.json、waifu.css这几个文件放入到next主题中/source/js/src目录下，也可以将json和css文件放到对于的目录下，但是需要改动下autoload中的路径，我这里偷懒直接放到一起了orz

<script src="/js/src/autoload.js"></script>

将上面这句放入到主题的/layout/_layout.swing中body标签的末尾，autoload.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
//开始加斜杠和不加是完全不同的路径,这里改为了我放置的相对路径
const live2d_path = "/js/src/";
//const live2d_path = "./";

$("<link>").attr({href: live2d_path + "waifu.css", rel: "stylesheet", type: "text/css"}).appendTo("head");
//waifu.css的绝对路径

$.ajax({
	url: live2d_path + "live2d.min.js",
	dataType: "script",
	cache: true,
	async: false
});
//live2d.min.js的绝对路径

$.ajax({
	url: live2d_path + "waifu-tips.js",
	dataType: "script",
	cache: true,
	async: false
});
//waifu-tips.js的绝对路径

//初始化看板娘，会自动加载指定目录下的waifu-tips.json
$(window).on("load", function() {
	initWidget(live2d_path + "waifu-tips.json", "https://live2d.fghrsh.net/api");
});
//initWidget第一个参数为waifu-tips.json的绝对路径
//第二个参数为api地址（无需修改）
//api后端可自行搭建，参考https://github.com/fghrsh/live2d_api

然后打开waifu-tips.js，在方法initWidget中将下面这句话移到方法的最前面，这样可以在关闭live2d后，刷新时重新加载。

localStorage.removeItem("waifu-display");

添加拖动

上述操作完成之后却发现一个问题，模型位置是固定的，不能拖动 - -。进一步了解之后，自定义的编写了如下的拖动方法(放在了waifu-tips.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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
//    绘制图片坐标
    var X=0;
    var Y=0;
//    js部分
    var divObj=document.getElementById("waifu");
    var moveFlag=false;
//区别moueseup与click的标志
    var clickFlag=false;
//    拖拽函数
    divObj.onmousedown=function(e){
        moveFlag=true;
        clickFlag=true;
        var clickEvent=window.event||e;
        var mwidth=clickEvent.clientX-divObj.offsetLeft;
        var mheight=clickEvent.clientY-divObj.offsetTop;
        document.onmousemove=function(e){
            clickFlag=false;
            var moveEvent=window.event||e;
            if(moveFlag){
                divObj.style.left=moveEvent.clientX-mwidth+"px";
                divObj.style.top=moveEvent.clientY-mheight+"px";
////              将鼠标坐标传给Canvas中的图像
                X=moveEvent.clientX-mwidth;
                Y=moveEvent.clientY-mheight;
////              下面四个条件为限制div以及图像的活动边界
                if(moveEvent.clientX<=mwidth){
                    divObj.style.left=0+"px";
                    X=0;
                }
                if(parseInt(divObj.style.left)+divObj.offsetWidth >=innerWidth){
                    divObj.style.left=innerWidth - divObj.offsetWidth+"px";
                    X=innerWidth - divObj.offsetWidth;
                }
                if(moveEvent.clientY<=mheight){
                    divObj.style.top=0+"px";
                    Y=0;
                }
                if(parseInt(divObj.style.top)+divObj.offsetHeight>=innerHeight){
                    divObj.style.top=innerHeight-divObj.offsetHeight+"px";
                    Y=innerHeight-divObj.offsetHeight;
                }
                divObj.onmouseup=function(){
                    moveFlag=false;
                }
            }
        }
    };

整个过程就是这样了，以上です～(｡-_-｡)。
tips：

在waifu-tips.js中waifu-tool里有几个写好的模块，可以自定义添加或删除，每个span对应一个功能
initmodel方法里有默认的加载模型，可以将随机更换注释掉，选择喜欢的固定模型
waifu-tips.json中包含了触发条件（选择器的事件）和触发时显示的文字，也可以自定义

0%