给博客增加个看板娘吧

发布于: 2019-07-04 20:56
阅读: 248
评论: 0
喜欢: 5

引言

相信大家都看到我博客右下角的看板娘啦,上线第一天就被戳了两三千次。

所以这是怎么实现的呢?

正文

主要步骤来自篇博文:给博客添加能动的看板娘(Live2D)-将其添加到网页上吧 —— 猫与向日葵

其实原理非常简单:

  • 制作模型。
  • 使用live2d加载模型。
  • 通过jQuery监听鼠标动作来触发不同的行为。
  • 小屏兼容、触屏兼容。

我们略过制作模型的阶段,直接到编码步骤。

按照博文的步骤,直接拷贝代码即可,需要注意的地方有:

  • waifu-tips.js中,藏着个 ajax 请求,用于异步拉取说的话,需要把path/to/waifu-tips.json替换成真实的。
  • waifu-tips.js中,根据referrer判断来源的代码需要自行修改成符合自己网站的情况。
  • waifu-tips.js中,有个三十秒定时的showHitokoto方法来访问 api 拉取一些诗句,视情况而定要不要去掉。
  • waifu-tips.js中,只监听click事件是不行的,需要加入对touchstart事件的兼容,否则 iOS 的浏览器上会无法触发点击。
var clickEventName = fromMobile() ? "touchstart" : "click";
$.each(result.click, function (index, tips) { ... }
  • waifu-tips.json中,截止我写这篇博客位置,作者文档里的 json 格式有问题,有个地方错位了,需要修正,否则 ajax 会解析失败。
  • waifu-tips.json记录了各个 selector 对应说的话,需要搭配 HTML 使用。如有疑问请自行学习 jQuery 语法。
  • 模型的model.js中,一定要包加入hit_areas_custom字段,否则live2d会报错,无法点击看板娘。
"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]
}
  • 所要求添加的 css 中,小屏优化在此处。原博主的优化是小屏不显示,我的是缩小看板娘。
@media (max-width: 1024px) {
    .live2d {
        width: 240px;
        height: 240px;
    }
    .waifu-tips {
        font-size: 14px;
    }
}

其余的按照原作者的流程走就没有问题啦。

至于模型制作,可以参考这篇博客:给博客添加能动的看板娘(Live2D)-模型格式v3转v2 —— 猫与向日葵

结语

我还没有做模型,目前使用的模型是直接爬原作者的,侵删。🤣


Thanks for reading.

All the best wishes for you! 💕