给博客增加个看板娘吧

发布于:2019-07-04 20:56,阅读数:389,点赞数:6


# 引言

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

所以这是怎么实现的呢?

# 正文

主要步骤来自篇博文:[给博客添加能动的看板娘(Live2D)-将其添加到网页上吧 —— 猫与向日葵](https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02)

其实原理非常简单:

- 制作模型。
- 使用`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 的浏览器上会无法触发点击。

```js
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`会报错,无法点击看板娘。

```json
"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 中,小屏优化在此处。原博主的优化是小屏不显示,我的是缩小看板娘。

```css
@media (max-width: 1024px) {
.live2d {
width: 240px;
height: 240px;
}
.waifu-tips {
font-size: 14px;
}
}
```

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

至于模型制作,可以参考这篇博客:[给博客添加能动的看板娘(Live2D)-模型格式v3转v2 —— 猫与向日葵](https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-03)

# 结语

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


评论:0条


返回列表

返回归档

返回主页