Live2d亚丝娜看板娘来了！
其实网上有很多功能强大的看板娘，它们支持换装，支持身体交互等等功能。但是我单纯想放一个自己喜欢的动漫角色当看板娘，我在github找了很久终于找到了我想要的亚丝娜看板娘，尽管它比较老了支持的功能也比较少，但我还是乐意用它，因为亚丝娜天下第一！
下面附上项目链接
https://github.com/Moelimoe/Asuna_live2d
但是项目作者可能就只是随手丢在github上备份的，有部分文件缺失，以及文件位置拜访不正确。
下面我从如何在本地部署，以及如何上线博客，如何调整看板娘的大小和位置三方面来讲。
如何在本地部署
首先我们将github上的原项目下载下来
解压后是下面的模样
我们需要把asuna开头的两个json文件放到assets文件夹里面
然后将moc以及mtn文件夹也放到assets文件夹里面
其实这个项目缺少了一个最关键的文件夹lib，不知道原作者把它打包到github是怎么打包的。我将lib文件夹放到我的百度网盘上了，可以自行下载。
通过网盘分享的文件：lib
链接: https://pan.baidu.com/s/1fdEw_lvvOGiQFnTh-KXMvw?pwd=13ji 提取码: 13ji
下载后也将它放在与assets同级
然后我们创建一个index.html
写入如下代码
<!DOCTYPE html>
<html>
<head>
<meta name="live2DWidget" charset="utf-8" />
<script src="./lib/L2Dwidget.min.js"></script>
</head>
<body>
<script>
L2Dwidget.init({
model: { jsonPath: "./assets/asuna_04.model.json" }
});
</script>
</body>
</html>
想要在本地部署，我们还需要nginx环境。
下面我使用的是linux中的nginx容器docker
- 首先我们将项目中的文件/文件夹拷贝一份到/root/wwwtest下，没有wwwtest会自动创建
- 然后执行下面的命令
docker run -d -p 8080:80 -v /root/wwwtest/:/usr/share/nginx/html/ nginx
没有nginx容器会自动pull，至于pull不下来或者说没有docker命令的自己去网上搜，很多教程然后查看你的linux的ip地址
ip addr
如我的linux的ip就是192.168.45.129
然后就可以使用浏览器访问http://你的ip:8080
不出意外你就得到了一只可爱的亚丝娜
当然你可以不使用docker，也可以用在windows上集成环境的比如usbwebserver，phpstudy之类的。
如何上线个人博客
为啥要现在本地部署，因为可以在本地调试到满意再拷贝到博客里就好了。这里我以我使用的Wordpress为例，使用别的博客系统的自行研究。
- 首先，现在你网站的根目录下创建一个live2d文件夹
- 在live2d里放入我们的assets和lib文件夹。
- 然后打开 your网站根目录/wp-content/themes/你使用的主题/header.php
然后在header.php的
</head>标签前面加入下面的源代码 <!--Live2D show start-->
<meta name="live2DWidget" charset="utf-8" />
<script src="http://修改为你的博客网站/live2d/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
model: { jsonPath: "http://修改为你的博客网站/live2d/assets/asuna_04.model.json" },
});
</script>
<!--Live2D show end-->然后保存即可，现在再去你的博客上看应该就能看到亚丝娜看板娘了。
如何调整大小和位置
打开lib文件夹下的L2Dwidget.min.js文件
ctrl+f搜索display，找到最后一个display
其中的width和height就是宽高，调整记得一定要1:2。不然人物模型会很奇怪
至于调整位置或者想要模糊化什么的，直接将这个文件丢给豆包或者deepseek就好了，让它帮你找在哪改。
如果修改后发现博客里的看板娘还是没变化，就将这个文件删了重新上传就好了。
此文章为本人原创，如果对你有帮助点个免费的小赞吧🌹