给你的网页中添加Live2D看板娘-阿呆日记

给你的网页中添加Live2D看板娘

2088字 11分钟 2025-05-19 daixbu 53 1 该作者已发布132篇文章

前言

看板娘（Live2D 互动角色）简易集成说明

看板娘是基于 Live2D 技术实现的网页互动角色，能为网站增添趣味性和亲和力。以下是关于独立代码集成版看板娘的简易介绍和使用说明：

核心特点

无平台限制
- 无需依赖 Typecho、WordPress 等特定程序，仅需一段 HTML/JS 代码，可嵌入任意单页网站（如静态博客、个人主页、企业官网等）。
轻量集成
- 只需在网页 <body> 标签内任意位置粘贴代码，无需安装插件或修改复杂配置。
互动功能
- 支持鼠标点击、跟随滑动、表情变化等基础互动效果，提升访客停留时长。
技术依赖
- 基于 Pio 看板娘项目和 Live2D 引擎开发，角色模型需配合 .model.json 等资源文件加载。

使用步骤

准备资源文件
- 下载看板娘资源包（包含角色模型、动画文件、CSS/JS 脚本），通常需以下文件：
  - live2d.min.js：Live2D 引擎核心脚本
  - model.json：角色模型配置文件

演示图

教程

把下面代码放到后台自定义HTML底部

此处内容已隐藏，请评论后刷新页面查看.

如果想换其他模版，可以修改 jsonPath 的路径，可选的模型（从此处整理来：https://www.cnblogs.com/goodmemoryblog/p/14279625.html）有：

//黑猫咪：https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json

//白猫咪：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json

//萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json

//狗狗：https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json

//萌妹1号：https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json

//萌妹2号：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json

//萌妹3号：https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json

//妹子4号：https://unpkg.com/live2d-widget-model-izumi@1.0.5/assets/izumi.model.json

//妹子5号：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json

//6号：https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json

//7号：https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json

//8号：https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json

//9号：https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json

//10号：https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json

//11号：https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json

//帅哥1号：https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json

//帅哥2号：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json