目录请看 Hexo 搭建博客大全

注意：如果出现图片不显示问题请移步 图片不显示问题

本文主要记载

  • 使用 hexo-helper-live2d 完成看板娘
  • 自定义看板娘(右下角那个~)
    • 运行、接入 Demo
    • 更换、修改模型

使用 hexo-helper-live2d 完成看板娘

我的 Live2D 版本是 3.1.1

首先安装配置 hexo-helper-live2d，在 hexo 根目录下执行

1
npm install hexo-helper-live2d --save

插件就安装完成了，你可一下选一个 模型 这个给出了展示效果，但是不全， 更多模型 这个没有展示效果，比之前的全一点，可以自己试试效果 ~

在模型中记住自己选择模型的名字 live2d-widget-model-你选中的模型名字 ，然后进行安装

1
npm install live2d-widget-model-wanko --save

然后再 Hexo 配置文件 中，添加如下代码，代码格式很重要！！！ 有时候复制进去没有缩进，效果是出不来的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-wanko
  display:
    position: left
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

这样一只可爱的小白狗就出现了。

如果要加载自定义模型，需要在根目录新建文件夹 live2d_models 下，再新建一个文件夹 kesshouban （此处自定义） 然后将资源文件放入 kesshouban 内 。然后修改 Hexo 配置文件 ，将 model.use 写成 kesshouban 。

自定义看板娘

首先感谢 大佬 提供的视屏教程，清晰易懂。

感谢 galnetwen 提供的代码。

1. 运行 Demo

首先你需要将 代码 下载下来

解压代码并将 Live2D-master 里的内容 live2d 和 demo.html ，解压到 hexo 根目录的 public 的文件夹下。并运行且进入本地访问

1
hexo s
1
http://localhost:4000/demo.html

如果出现 药水制作师 里的模型，就可以啦，如果出不来，证明你路径有问题，请检查路径， live2d 和 demo.html 文件在 public 文件夹下。

2. 接入 Demo

将 live2d 文件夹剪切到 hexo/themes/next/source , 文件夹内应该有三个文件夹 css js model 和一个文件 message.json 。

然后将 demo.html 中的代码整理出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link rel="stylesheet" href="/live2d/css/live2d.css" />
<div id="landlord">
  <div class="message" style="opacity:0"></div>
  <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
  <div class="hide-button">隐藏</div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
  var message_Path = '/live2d/'
  var home_Path = 'https://calmcenter.club/'
</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>

粘贴到 /theme/next/layout/layout.swig 的 <footer> 标签下

执行

1
hexo clean && hexo g && hexo s

看板娘就到我们的博客上来啦~

3. 更换模型

感谢 猫与向日葵 提供血小板模型 下载地址

在 hexo/next/source/live2d/model 中新建一个文件夹，将压缩包里面的内容，也就是模型放到里面，然后修改 model.json 

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
{	
    "type": "Live2D Model Setting",
    "name": "model",
    "version":"1.0.0",
    "model": "model.moc",
    "textures": [
      "model.2048/texture_00.png"
    ],
    "layout":{
      "center_x":0.0,
      "center_y":0.05,
      "width":1.8
    },
    "hit_areas_custom":{
      "head_x":[-0.35, 0.6],
      "head_y":[0.19, -0.2],
      "body_x":[-0.3, -0.25],
      "body_y":[0.3, -0.9]
    },
    "motions":{
      "idle":[
        {"file":"motions/Idle.mtn"}
      ],
      "sleepy":[
      	{"file":"motions/Nemui.mtn"}
      ],
      "flick_head":[
      	{"file":"motions/Anone_Synced.mtn"}
      ],
      "tap_body":[
      	{"file":"motions/Dance.mtn"}
      ]
    }
}

最终成这样，一个标点都不能错 ！主要是 layout(用于移动模型位置) 和 hit_areas_custom(用于声明点击事件范围)

值的算法很简单(自己一点一点试的 = =)，以父布局中心为原点，做直角坐标系~

这里感谢 jacob 与我一起讨论相关内容

然后将 /theme/next/layout/layout.swig 的 <footer> 添加的那句话

1
2
3
<script type="text/javascript">
	loadlive2d("live2d", "/live2d/model/xxb/model.json");
</script>

将 xxb 改成你新建的文件夹名字，编译运行

1
hexo g && hexo s

4. 修改模型

大佬链接