前言
之前其实我有写过这个，但是发现好像有一点写漏了，今天重新写一个吧
下载
所需文件下载：https://wwkm.lanzouf.com/irqig0tl9wkh
效果示例参考我网站的dome：https://uurr.cn/myfile/live2d/
文件分为api和assets
api是模型的接口，这个可以供别人使用也可以使用别人的，assets则是一些资源什么的
你可以引用我网站的api资源 https://uurr.cn/myfile/live2d/api
接口
下载好后在assets/waifu-tips.min.js文件中搜索 ;live2d_settings.modelAPI=" 将你的或者我的api接口填上去就像这样
页面引用
页面引用示例，要注意这里的目录别到时候引用错了
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D 看板娘 v1.4 / Demo 1</title>
<link rel="stylesheet" type="text/css" href="assets/waifu.min.css?v=1.4.2"/>
</head>
<body style="font-family: 'Microsoft YaHei';">
<!-- waifu-tips.js 依赖 JQuery 库 -->
<script src="assets/jquery.min.js?v=3.3.1"></script>
<!-- 实现拖动效果，需引入 JQuery UI -->
<script src="assets/jquery-ui.min.js?v=1.12.1"></script>
<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>
<script src="assets/waifu-tips.min.js?v=1.4.2"></script>
<script src="assets/live2d.min.js?v=1.0.5"></script>
<script type="text/javascript">
/* 可直接修改部分参数 */
live2d_settings["modelId"] = 1; // 默认模型 ID
live2d_settings["modelTexturesId"] = 87; // 默认材质 ID
live2d_settings["modelStorage"] = false; // 不储存模型 ID
live2d_settings["canCloseLive2d"] = false; // 隐藏 关闭看板娘 按钮
live2d_settings["canTurnToHomePage"] = false; // 隐藏 返回首页 按钮
live2d_settings["waifuSize"] = "160x160"; // 看板娘大小
live2d_settings["waifuTipsSize"] = "570x150"; // 提示框大小
live2d_settings["waifuFontSize"] = "30px"; // 提示框字体
live2d_settings["waifuToolFont"] = "36px"; // 工具栏字体
live2d_settings["waifuToolLine"] = "50px"; // 工具栏行高
live2d_settings["waifuToolTop"] = "-60px"; // 工具栏顶部边距
live2d_settings["waifuDraggable"] = "unlimited"; // 拖拽样式
live2d_settings["waifuDraggableRevert"] = false;
/* 在 initModel 前添加 */
initModel("assets/waifu-tips.json?v=1.4.2")
</script>
</body>
</html>joe主题后台引用示例
如何你要在其它地方比如joe主题等使用的话就直接将body的内容放在你主题后台设 - 全局设置 - 自定义
中即可 <!-- waifu-tips.js 依赖 JQuery 库 -->
<script src="assets/jquery.min.js?v=3.3.1"></script>
<!-- 实现拖动效果，需引入 JQuery UI -->
<script src="assets/jquery-ui.min.js?v=1.12.1"></script>
<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>
<script src="assets/waifu-tips.min.js?v=1.4.2"></script>
<script src="assets/live2d.min.js?v=1.0.5"></script>
<script type="text/javascript">
/* 可直接修改部分参数 */
live2d_settings["modelId"] = 1; // 默认模型 ID
live2d_settings["modelTexturesId"] = 87; // 默认材质 ID
live2d_settings["modelStorage"] = false; // 不储存模型 ID
live2d_settings["canCloseLive2d"] = false; // 隐藏 关闭看板娘 按钮
live2d_settings["canTurnToHomePage"] = false; // 隐藏 返回首页 按钮
live2d_settings["waifuSize"] = "160x160"; // 看板娘大小
live2d_settings["waifuTipsSize"] = "570x150"; // 提示框大小
live2d_settings["waifuFontSize"] = "30px"; // 提示框字体
live2d_settings["waifuToolFont"] = "36px"; // 工具栏字体
live2d_settings["waifuToolLine"] = "50px"; // 工具栏行高
live2d_settings["waifuToolTop"] = "-60px"; // 工具栏顶部边距
live2d_settings["waifuDraggable"] = "unlimited"; // 拖拽样式
live2d_settings["waifuDraggableRevert"] = false;
/* 在 initModel 前添加 */
initModel("assets/waifu-tips.json?v=1.4.2")
</script>
I think everything said was actually very logical.
However, what about this? suppose you typed a catchier title?
I am not saying your information isn't solid, but what if you added a title that makes people
want more? I mean 给网站加个LIVE2D - 有人来了快跑 is kinda
vanilla. You ought to look at Yahoo's home page and watch how they create
post headlines to grab people to click. You might add a related video or a related picture or two to grab people interested about what you've written. Just my opinion, it might make
your blog a little bit more interesting.
Thanks foг finallｙ writing abⲟut >给网站加个LIVE2D - 有人来了快跑
I believe everything posted was very reasonable. But, what about
this? what iif you were to write a awesome headline? I ain't saying your content isn't solid, however what
if you added a post title to possibly grab people's attention? I mean 给网站加个LIVE2D -
有人来了快跑 is kinda plain. You ought to peek att Yahoo's front ppage and watch how they write post titles to get people interested.
You might add a related video or a picture or two to grab people interested about what
you've got to say. In my opinion, it would make your website
a little bbit more interesting.