确定了，今天带一个看板娘回家

💃 内容为王，但谁还不是一个颜控？

有一说一，向来我自己的站点风格都尽力保持简约大方，没有多余的功能模块，也没有花里胡哨的css和js，就是简简单单的，希望给人一种大家闺秀的感觉。但这样，难免会缺少邻家小妹的秀气，宛如房间里缺少绿植，少了些许灵动。于是，我决定走出去观赏哈大佬们的博客，只有这样才可以让愚笨的我找到些许灵感，进而让我的寒舍蓬荜生辉。

对不起，我看上你家的老板娘了
怀着初心，四处寻觅，在TX交友网站「Github」停留良久，尤其是基于Hexo的主题更是让人眼花缭乱。

乱花渐欲迷人眼，浅草才能没马蹄。 —— 钱塘湖春行(白居易)

为了维持现有的博客风格，自然是不能大修大改。正在踌躇时，一篇博文引起了我的注意，当然现在我已经想不起来具体文章内容，只记得左下角有一个可可爱爱的女孩像花一样冲着我笑，还很调皮。我坦白，当时我就……瞬间有了灵感。
<div>
<video src= "https://file.mynamecoder.com/live2d_api/live2d-demo.mp4" width="200" height="250" muted autoplay loop></video>
</div>

是不是很二次元！点击完整体验 当时我猜想，这个姑娘应该是该网站的老板娘，如果把她带走放置到我的网站，岂不是会增加些许灵气？

一见钟情，我带走了别人的看板娘
说干就干，查了相关资料，原来这个叫做Live2D

是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像，对于以动画风格为主的冒险游戏来说非常有用。

集成到网页中后，学术名叫看板娘，hexo官方已经存在插件hexo-helper-live2d，但是5年前就已经停止更新，没有新的模型，不推荐大家使用。

看着看着我就打开了控制台……
<img src="https://img.mynamecoder.com/20230310114431.jpg"/>
分析了一下网络请求，原来看板娘分两块内容：

• 框架
• 模型

所以，首先我们得先把框架集成到项目中，然后再将模型文件引入进来。

看板娘框架

我又在TX交友网站「Github」根据关键词检索了一番，发现一个不错的框架stevenjoezhang/live2d-widget，支持的模型也很可爱，目前这个框架已经开源，我已经fork。感谢该作者，说明文档也写的很全面，此处不再赘述如何使用，主要有两种集成方式：

| 方式 | 优点 | 缺点 |
| :-: | :-: | :-: |
| 直接引用JS| 一键引入、方便快捷、节省生命 | 不支持自定义 |
| 魔改框架✅ | 将源码下载后，魔改该框架，这样更契合你的网站 | 花点时间理解框架 |

我当然选择了魔改框架，因为我要为我的网站高级定制看板娘。

看板娘模型

当你看懂这个框架之后，会发现，虽然这个框架不提供模型，但是，很明显cdnPath就是访问模型的路径。模型的静态资源已经放入到cdn上面了，速度却还是很慢。所以，接下来，我有一个想法：把静态资源爬下来，放到国内的cdn上。
<img src="https://img.mynamecoder.com/20230310215816.jpg"/>
通过分析网络请求，发现前三个请求都是json格式的配置文件：

• model_list.json是展示该模型库所有的模型列表
• waifu-tips.json 是控制看板娘框架不同交互的提示语，在框架中控制，不属于模型库
• index.json指的是当前展示的模型需要哪些配置
• 剩下的网络请求路径全部依托于index.json里面的配置内容

所以，我们可以得出结论，如果想要爬取这个模型库，那我们按以下步骤：
<img src="https://img.mynamecoder.com/20230310224059.png"/>
人生苦短，我用python写了一个脚本爬取，主要用到的库是requests、os，在写的过程中发现一个趣事：

# mkdirs竟然可以支持创建带有上级路径的文件夹
path = '/pic/../video'
os.path.mkdirs(path) # 会创建video的文件夹
# abspath可以计算绝对路径，比如输入`/pic/../video/xx.mp4`
path = '/pic/../video/xx.mp4'
print(os.path.abspath(path)) # 输出`/video/xx.mp4`

代码我已经上传到github上面，大家可以参考。这个仓库会更新一些平时写的脚本，老哥们感兴趣的话，可以star⭐️。
经过爬取，我整理了一下模型库，总共有27个模型，并将各个模型的名字也标注出来：
<img src="https://img.mynamecoder.com/20230312225005.png"/>
模型库我已经上传到Githublive2d_models，推荐大家可以将这些模型都上传自己的cdn服务（大小70M+，不适合放入项目中），然后在model_list.json配置自己喜欢的模型，cdn服务我一直用的是七牛云，一个月不到1块钱（可能是没什么访问量😒）
<img src="https://img.mynamecoder.com/20230312230900.jpg"/>
速度很快，服务稳定，价格便宜，方便管理（比如防盗链等设置），现在可以点击我的推广链接进行试用。
比如，当前网站就配置了6个模型
<img src="https://img.mynamecoder.com/20230313000544.jpeg" width=400 height=400/>

好啦，大家如果感兴趣可以带一个看板娘回家，如果在配置过程中遇到什么问题，可以关注微信公众号，进群交流。

本文可转载，但需声明原文出处。 程序员小明，一个很少加班的程序员。欢迎关注微信公众号“程序员小明”，获取更多优质文章。