血小板

起因

前几天无聊网上冲浪，无意间看到一位大佬（猫与向日葵）博客右下方的血小板甚是可爱。 真的好可爱啊，于是我就想为自己的博客也添加一个，有谁不喜欢这么可爱的血小板呢。 刚好这个大佬还有关于她的一套教程，何乐不为呢。

折腾过程

本人对php一窍不通，只会一点python，折腾代码为最后的解决方案。 从大佬的博客那里了解到typecho有一款看板娘插件pio（github-pio） 通过pio可以在后台设置不同的看板娘， 从大佬那里下载了血小板的模型（原文地址） 通过pio插件将血小板引入到自己的博客

半成品

虽然血小板安装成功了，但是与大佬的相比 eMMM，不说了，难受。不会跳舞的血小板是木的灵魂的。 本人分析问题出在了Pio/static/l2d.js这个文件上，也就是大佬的live2d.js这个文件。 以我目前的水平解决是有困难的。

摘要

参考来源 https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-03 https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02

补档

最近解决了血小板不能跳舞的问题 由于之前控制台一直报错l2d.js，所以一直以为是它出了问题 直到偶然一次开启了pio里自带的pio，发现模型是可以正常运动的 说明js是正常的。然后比对了两者的model.json，发现血小板的没有定义位置 原来是缺失参数造成的，将位置定义加上就好了。model.json改成如下

"type": "Live2D Model Setting",
"name": "model",
"model": "model.moc",
"textures": [
"model.2048/texture_00.png"
],
"layout":{
"center_x":0.0,
"center_y":-0.05,
"width":2.0
},
"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"}
]
}
}

注意：文件名我改成小写了，引入时请注意。

更新

1. 更改加载方式

• 使用pio插件加载的血小板并不是很清晰。改为直接增加代码引入，清晰度明显提高。

2. 增加了退出按钮

• 遮挡了左侧导航栏，造成无法点击。增加血小板退出按钮解决此问题。

3. 修复加载源图

• 在imjad.cn上的血小板放大之后可以看到嘴巴上有“胡子”，使用ps修复了此问题。

4. 更改血小板默认显示在屏幕右侧

• 显示在左侧会遮挡导航栏。不需要把血小板关闭就能点啦。

5. 解决页脚遮挡的问题

• handsome的页脚会挡住血小板。看来z-index还是不够大。

5. 移动端自动隐藏。

• pe设备还是隐藏吧，毕竟屏幕就这么大。血小板放上去就显得臃肿了。

6. 现在支持AJAX刷新了

• 点击按钮移除了js脚本，改用超链，主要适配刷新歌曲暂停的问题。

---

2020/8/10 更新

1. 重构了部分代码，不在依赖JQ
2. 更好看的样式
3. 现在血小板可以换装了
4. 借鉴了github上的代码，增加了血小板显示按钮，重新加载不需要刷新啦。
5. 解决了血小板多年来的颈椎病
6. 重新判定了触摸区域，脚就是脚，身体就是身体（重要）