想要专属看板娘？手把手教你搭建 API 并完成部署
本文详细介绍了如何从零开始搭建Live2D看板娘系统。首先需要从GitHub获取开源资源包，然后配置服务器环境（PHP5.2+），建立API和CDN两个站点。接着修改配置文件中的路径参数，包括插件路径和API路径。最后通过引入autoload.js和CSS样式表实现前端展示，并可通过调整waifu-tips.js、waifu-tips.json和waifu.css三个文件来自定义看板娘的对话内容和
写在前面
博主之前自己搭建过专属看板娘，把实操步骤记录下来，希望能帮到感兴趣的小伙伴。能力有限，不喜勿喷
目录
受 Live2D 开源协议约束，本文不予展示项目源码，可前往文中附站自行下载。
文中所用模型、图像及动作素材版权归原作者所有，仅作学习研究使用，严禁商用。
从零从头开发难度颇高，高效做法是前往 GitHub 复用现成开源 API 项目
一、资源准备
博主在github上找到了一个大佬搞得，地址放在下面
live2d-package
https://github.com/pudding0503/live2d-package
大家访问到大佬的仓库后，直接点击Download ZIP把压缩包下载到本地，或者使用git clone将项目克隆到本地也是可以的
将资源上传到服务器
二、服务器环境配置
博主日常使用宝塔面板管理服务器，本次教程也以此为例演示操作。
1.文件上传
Live2D API 用于搭建自己的Live2D后端
Live2D Widget 用于前端载入Live2D模型和服务
将两个文件夹通过宝塔面板上传到服务器wwwroot目录下
2.环境配置
Live2D API需要依赖PHP环境，而且PHP版本要大于等于5.2，所以我们先去安装PHP环境
在宝塔面板左侧边栏中点击软件商店，进入软件商店，搜索PHP，选择符合要求的版本，点击安装
博主选择的是5.4.45版本
点击安装，会弹出一个对话框，可以选择安装方式
- 编译安装：安装时间较长，性能最大化，适合生产环境
- 极速安装：安装时间极快，但是版本与稳定性略低于编译安装，适合快速部署测试
博主选择的是编译安装，等待PHP环境安装完成后，我们就可以进行下一步了
3.建立站点
我们点击面板左侧边栏的网站，进入网站部署的页面
1.创建API站点
选择PHP项目，点击添加站点，在弹出的对话框中进行配置
按照对话框中的提示进行填写即可
域名一栏，如果有域名的话，可以填写自己的域名，没有的话可以填写服务器ip+端口的方式
根目录选择我们上传的live2d-api文件夹
FTP与数据库不用修改
如果你的服务器上只有一个PHP版本，它会默认选择这个唯一的版本，如果有多个版本的话，需要你选择符合要求的版本
2.创建CDN站点
我们再选择HTML项目，点击添加项目，在弹出的对话框中进行配置
同样是按照对话框的提示进行填写，根目录选择live2d-widget
注意，域名或端口号不要与已有的冲突
三、修改配置文件
我们进入/www/wwwroot/live2d-widget这个路径，就可以看到live2d-weight的所有文件
双击autoload.js，开始修改该文件
1.修改插件路径
修改live2d_path这个变量，将它修改成前面的cdn站点的地址
博主这里使用的是域名的方式，也可以使用ip+端口号的方式，注意，最后的“/”一定不要漏加
2.修改live2d api路径
同样是autoload.js文件，我们往下看，找到apiPath，原本这个变量是注释状态，我们要先解除注释，然后将其修改为api站点的地址，博主这里使用的还是域名的方式，同样的，最后的“/”不要漏加
cdnPath可以注释掉或者删掉
四、引入文件
1.引入autoload.js
接下来，在HTML中，引入autoload.js文件，建议是在代码最后，</body>标签之前引入
示例代码：
<script src="https://xxxxxxxx.xxxxxx/autoload.js"></script>注意
src路径名一定要完整，autoload.js在cdn站点的根目录下
最后的/autoload.js一定不要漏加
2.引入css样式表
使用下方代码即可
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">我们可以在本地新建一个HTML文件，引入上述文件测试一下
看板娘已经出现了
五、微调参数
看板娘的话，以及对话框文字颜色都是可以微调的
进入/www/wwwroot/live2d-widget目录，我们找到三个文件
- waifu-tips.js
- waifu-tips.json
- waifu.css
1.waifu-tips.js
这个文件可以修改看板娘的工具栏
同时，看板娘的话也是可以自定义的
你想让她说什么，在messageArray数组中加入即可
试想一下，把你好兄弟的名字放在里面，你的好兄弟访问你的网站时，突然间看到自己的名字会不会很惊讶呢
注意
看板娘的话也不能违法！！！
2.waifu-tips.json
这个文件定义了看板娘工具栏的一些按钮触发时的对话，感兴趣的朋友可以自行探索一番
3.waifu.css
这个文件定义了看板娘的一些基础样式，包括对话框颜色，文字颜色等，大家在引入看板娘后，可以通过F12，检查代码，定位到对应的标签，根据id或class找到css样式修改
友情提示
在修改这三个文件前，一定要做好备份，不要乱改，不然你的看板娘就要离你而去了
最后附上博主的个人网站（线上名片）
Wisteria Homehttps://www.wisteria0712.top/
往期文章
openEuler 是由开放原子开源基金会孵化的全场景开源操作系统项目，面向数字基础设施四大核心场景（服务器、云计算、边缘计算、嵌入式），全面支持 ARM、x86、RISC-V、loongArch、PowerPC、SW-64 等多样性计算架构
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)