在Github上看到了这个repositories Live2D人物
诶,好像还整挺好。于是乎,一顿折腾之后,网页前端+PHP后端都部署好了,提供开放CDN服务;即您只需要在您的网页上添加几行配置代码,就可以完成Live2D的添加
部署完了记得加个友链(认真脸)
步骤
step1
想办法编辑您的网页源码(这一步是基础)
step2
在您的网页的<html>和</html>之间添加代码,或者说在网页页眉或页脚区添加
step3
此部分引用了OpenCDN提供的Js和CSS以及我自建的后端api,不开心的请您自行修改
<div class="waifu"><div class="waifu-tips"></div><canvas id="live2d" class="live2d"></canvas><div class="waifu-tool"><span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span></div></div>
<!-- 必须引用 -->
<link rel="stylesheet" type="text/css" href="https://opencdn.oldtaoge.space:21286/live2d/waifu.min.css"/>
<script src="https://opencdn.oldtaoge.space:21286/live2d/live2d.min.js"></script>
<!-- Jquery 按需引用 -->
<script src="https://opencdn.oldtaoge.space:21286/js/jquery.min.js"></script>
<script src="https://opencdn.oldtaoge.space:21286/js/jquery-ui.min.js"></script>
<!-- ↓配置文件,包括后端API定义 -->
<script src="https://opencdn.oldtaoge.space:21286/live2d/waifu-tips.min.js"></script>
<script type="text/javascript">
<!-- 可添加修改参数 -->
live2d_settings['hitokotoAPI'] = "hitokoto.cn"; // 一言 API
live2d_settings['modelId'] = 1; // 默认模型 ID
live2d_settings['modelTexturesId'] = 0; // 默认材质 ID(打开控制台console自行查看)
live2d_settings['modelStorage'] = false; // 不储存模型 ID
live2d_settings['aboutPageUrl'] = '关于页地址'; // 关于页地址, '{URL 网址}'
live2d_settings['homePageUrl'] = '主页地址'
/* 在 initModel 前添加 */
initModel("https://opencdn.oldtaoge.space:21286/live2d/waifu-tips.json");
</script>
注意:有些参数必须要自己改,不要一股脑的贴进去
配置项都在waifu-tips.min.js里,贴过来修改就行了
参数信息
为了保护您的鼠标,请点击以阅读
// 后端接口
live2d_settings['modelAPI'] = 'https://api.oldtaoge.space:21286/live2d/'; // ×Ô½¨ API ÐÞ¸ÄÕâÀï
live2d_settings['tipsMessage'] = 'waifu-tips.json'; // 同目录下可省略路径
live2d_settings['hitokotoAPI'] = 'lwl12.com'; // 一言 API,可选 'lwl12.com', 'hitokoto.cn', 'jinrishici.com'(古诗词)
// 默认模型
live2d_settings['modelId'] = 1; // 默认模型 ID,可在 F12 控制台找到
live2d_settings['modelTexturesId'] = 0; // 默认材质 ID,可在 F12 控制台找到
// 工具栏设置
live2d_settings['showToolMenu'] = true; // 显示 工具栏 ,可选 true(真), false(假)
live2d_settings['canCloseLive2d'] = true; // 显示 关闭看板娘 按钮,可选 true(真), false(假)
live2d_settings['canSwitchModel'] = true; // 显示 模型切换 按钮,可选 true(真), false(假)
live2d_settings['canSwitchTextures'] = true; // 显示 材质切换 按钮,可选 true(真), false(假)
live2d_settings['canSwitchHitokoto'] = true; // 显示 一言切换 按钮,可选 true(真), false(假)
live2d_settings['canTakeScreenshot'] = true; // 显示 看板娘截图 按钮,可选 true(真), false(假)
live2d_settings['canTurnToHomePage'] = true; // 显示 返回首页 按钮,可选 true(真), false(假)
live2d_settings['canTurnToAboutPage'] = false; // 显示 跳转关于页 按钮,可选 true(真), false(假)
// 模型切换模式
live2d_settings['modelStorage'] = true; // 记录 ID (刷新后恢复),可选 true(真), false(假)
live2d_settings['modelRandMode'] = 'switch'; // 模型切换,可选 'rand'(随机), 'switch'(顺序)
live2d_settings['modelTexturesRandMode']= 'rand'; // 材质切换,可选 'rand'(随机), 'switch'(顺序)
// 提示消息选项
live2d_settings['showHitokoto'] = true; // 显示一言
live2d_settings['showF12Status'] = true; // 显示加载状态
live2d_settings['showF12Message'] = true; // 显示看板娘消息
live2d_settings['showF12OpenMsg'] = true; // 显示控制台打开提示
live2d_settings['showCopyMessage'] = true; // 显示 复制内容 提示
live2d_settings['showWelcomeMessage'] = true; // 显示进入面页欢迎词
//看板娘样式设置
live2d_settings['waifuSize'] = '280x250'; // 看板娘大小,例如 '280x250', '600x535'
live2d_settings['waifuTipsSize'] = '250x70'; // 提示框大小,例如 '250x70', '570x150'
live2d_settings['waifuFontSize'] = '12px'; // 提示框字体,例如 '12px', '30px'
live2d_settings['waifuToolFont'] = '14px'; // 工具栏字体,例如 '14px', '36px'
live2d_settings['waifuToolLine'] = '20px'; // 工具栏行高,例如 '20px', '36px'
live2d_settings['waifuToolTop'] = '0px' // 工具栏顶部边距,例如 '0px', '-60px'
live2d_settings['waifuMinWidth'] = '768px'; // 面页小于 指定宽度 隐藏看板娘,例如 'disable'(禁用), '768px'
live2d_settings['waifuEdgeSide'] = 'right:30'; // 看板娘贴边方向,例如 'left:0'(靠左 0px), 'right:30'(靠右 30px)
live2d_settings['waifuDraggable'] = 'axis-x'; // 拖拽样式,例如 'disable'(禁用), 'axis-x'(只能水平拖拽), 'unlimited'(自由拖拽)
live2d_settings['waifuDraggableRevert'] = true; // 松开鼠标还原拖拽位置,可选 true(真), false(假)
// 其他杂项设置
live2d_settings['l2dVersion'] = '1.4.2'; // 当前版本
live2d_settings['l2dVerDate'] = '2018.11.12'; // 版本更新日期
live2d_settings['homePageUrl'] = 'auto'; // 主页地址,可选 'auto'(自动), '{URL 网址}'
live2d_settings['aboutPageUrl'] = 'https://www.fghrsh.net/post/123.html'; // 关于页地址, '{URL 网址}'
live2d_settings['homePageUrl'] = 'auto'; // 主页地址,可选 'auto'(自动), '{URL 网址}'
live2d_settings['screenshotCaptureName']= 'live2d.png'; // 看板娘截图文件名,例如 'live2d.png'
参考
猫与向日葵
FGHRSH的博客