起因

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

折腾过程

本人对php一窍不通,只会一点python,折腾代码为最后的解决方案。
从大佬的博客那里了解到typecho有一款看板娘插件piogithub-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还是不够大。
  6. 移动端自动隐藏。

    • pe设备还是隐藏吧,毕竟屏幕就这么大。血小板放上去就显得臃肿了。
最后修改:2020 年 06 月 16 日 08 : 30 PM
赏口饭吃,行行好吧,客官!