# 引言 相信大家都看到我博客右下角的看板娘啦，上线第一天就被戳了两三千次。 所以这是怎么实现的呢？ # 正文 主要步骤来自篇博文：[给博客添加能动的看板娘(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) # 结语 我还没有做模型，目前使用的模型是直接爬原作者的，侵删。🤣