网站添加live2d人物 看板娘

在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里,贴过来修改就行了
 

参数信息

参考

猫与向日葵
FGHRSH的博客

泛雪相寻 , 版权所有丨如未注明 , 均为原创丨本网站采用CC BY-NC-SA 3.0 CN协议进行授权
转载请注明原文链接:网站添加live2d人物 看板娘
上一篇
下一篇