起因

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

折腾过程

本人对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插件加载的血小板并不是很清晰。改为直接增加代码引入，清晰度明显提高。
  1. 增加了退出按钮
  • 遮挡了左侧导航栏，造成无法点击。增加血小板退出按钮解决此问题。
  1. 修复加载源图
  • 在imjad.cn上的血小板放大之后可以看到嘴巴上有“胡子”，使用ps修复了此问题。
  1. 更改血小板默认显示在屏幕右侧
  • 显示在左侧会遮挡导航栏。不需要把血小板关闭就能点啦。
  1. 解决页脚遮挡的问题
  • handsome的页脚会挡住血小板。看来z-index还是不够大。
  1. 移动端自动隐藏。
  • pe设备还是隐藏吧，毕竟屏幕就这么大。血小板放上去就显得臃肿了。
  1. 现在支持AJAX刷新了
  • 点击按钮移除了js脚本，改用超链，主要适配刷新歌曲暂停的问题。

2020/8/10 更新

  1. 重构了部分代码，不在依赖JQ
  2. 更好看的样式
  3. 现在血小板可以换装了
  4. 借鉴了github上的代码，增加了血小板显示按钮，重新加载不需要刷新啦。
  5. 解决了血小板多年来的颈椎病
  6. 重新判定了触摸区域，脚就是脚，身体就是身体（重要）
最后修改：2020 年 08 月 10 日 05 : 56 PM
© 允许规范转载
赏口饭吃，行行好吧，客官！