68
0
0
Live2D 看板娘
[!TIP] 一套「纯静态前端 + 原生 PHP 接口、无数据库」的 Live2D 看板娘，基于 fghrsh/live2d_demo 前端与 fghrsh/live2d_api 后端，部署到群晖 Web Station 就能在博客右下角养一只看板娘。
- 源码：
https://github.com/lqbby/live2d-kanban - 线上演示：
https://lqbby.com/live2d/
技术栈
- 前端：fghrsh 原生 Live2D 运行时（Cubism 2.1），含
live2d.js、waifu-tips.js、waifu.css、提示语waifu-tips.json - 后端：fghrsh/live2d_api 原生 PHP 接口（
get/switch/rand/switch_textures/rand_textures/add），无数据库 - 模型：fghrsh 经典模型集（Cubism 2.1），放在
model/目录
[!WARNING] fghrsh 运行时是老版 Cubism 2.1，加载不了
.moc3（Cubism 3）模型。需要 Cubism 3 模型须换渲染内核（如 oh-my-live2d）。
准备工作
从 GitHub 克隆项目：
git clone https://github.com/lqbby/live2d-kanban.git
目录结构（关键部分）：
live2d-kanban/
├── index.html # 前端入口
├── assets/ # live2d.js / waifu-tips.js / waifu.css / jquery 等
├── get/ switch/ rand/ # 换模型 / 换材质接口（PHP）
├── switch_textures/ rand_textures/ add/
├── tools/ # modelList / modelTextures / jsonCompatible
├── model/ # 模型资源（.moc + textures + motions）
└── model_list.json # 模型清单
部署前确认：
- 群晖已安装 Web Station 与 PHP 8.x
model/目录可写（后端会写textures.cache缓存）
部署方式
方式一：群晖 Web Station（推荐）
- 把
live2d-kanban目录上传到群晖网页目录（如/volume1/webhttp/live2d） - 打开 Web Station → 网页服务 → 新增，后端选择 PHP 8.x
- 文档根（Document Root）指向
live2d-kanban目录（即index.html所在目录） - 端口 / 域名按需配置，例如通过反向代理挂到
https://lqbby.com/live2d/ - 保存并启用
方式二：通用 PHP 空间
把整个目录上传到任意支持 PHP 的空间根目录，访问 index.html 即可。无数据库、无额外依赖。
方式三：Docker（php:apache）
docker run -d --name live2d \
-p 8080:80 \
-v /path/to/live2d-kanban:/var/www/html \
php:apache
访问 http://<服务器IP>:8080/ 即可。
验证
打开部署地址（如 https://lqbby.com/live2d/），右下角应出现看板娘：
- 👁 换模型（顺序）
- 👕 换材质（顺序）
- 💬 一言
- 📷 拍照
- 🏠 首页 / ℹ️ 关于 / ✖ 关闭
常见问题
| 问题 | 排查 / 解决 |
|---|---|
| 看板娘不显示？ | 检查 assets/live2d.js、waifu-tips.js 与 assets/waifu-tips.json 是否可访问，浏览器控制台有无 404 |
| 接口返回 500？ | 确认 PHP 已启用，且 model/ 目录有写入权限（后端需生成 textures.cache） |
子路径部署（如 /live2d/）下模型加载失败？ |
确认 index.html 里的 live2d_settings.modelAPI 为同源根，且 model/ 可通过该子路径访问 |
[!NOTE] 版权：代码 MIT；模型归各原作者所有，禁止商用。