logo

Shellblock

给你的博客添加Live2D 看板娘

2021-01-15 Views676字4 min read繁
featureimg

DOME:

https://domepage.ml/live2d/
https://k-on.life/

使用

由于代码使用的是第三方API接口，难免一些细节无法自定义。
但是为了满足大家对 自定义看板娘的需求，我修改了部分代码以实现 直接修改部分参数。
当然如果你自己有服务器或者虚拟主机，可以考虑自行搭建API

  • 看板娘 前端 源码 https://github.com/fghrsh/live2d_demo
  • 模型切换 API 源码 https://github.com/fghrsh/live2d_api (PHP)

在 </head>前引入 waifu.css 样式表
在 </body> 前引入 waifu-tips.js 和 live2d.js
在 </body> 前插入 初始化 JS，可在 初始化前 设置参数
注意: 以下代码可能不适配所以模板，需要自行更改相应模板代码。

<html>
<head>

        · · ·   · · ·

    <link rel="stylesheet" type="text/css" href="//live2d-cdn.fghrsh.net/assets/1.4.2/waifu.min.css"/>
</head>
<body>

        · · ·   · · ·

<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-dist@1.12.1/jquery-ui.min.js"></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="//live2d-cdn.fghrsh.net/assets/1.4.2/waifu-tips.min.js"></script>
<script src="//live2d-cdn.fghrsh.net/assets/1.4.2/live2d.min.js"></script>
<script type="text/javascript">
        /* 可直接修改部分参数 */
        live2d_settings['modelId'] = 2;                            // 默认模型 ID 1-4
        live2d_settings['modelTexturesId'] = 87;                   // 默认材质 ID
        live2d_settings['modelStorage'] = false;                   // 不储存模型 ID
        live2d_settings['canCloseLive2d'] = true;                  // 隐藏 关闭看板娘 按钮
        live2d_settings['canTurnToHomePage'] = 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['waifuEdgeSide'] = 'right:0';     // 看板娘贴边方向，例如 'left:0'(靠左 0px), 'right:30'(靠右 30px)
        live2d_settings['waifuDraggable'] = 'disable';             // 拖拽样式  例如 'disable'(禁用), 'axis-x'(只能水平拖拽), 'unlimited'(自由拖拽)
        live2d_settings['aboutPageUrl']   = 'https://saky.site/';   // 关于页地址, '{URL 网址}'
        /* 在 initModel 前添加 */
        initModel("//live2d-cdn.fghrsh.net/assets/1.4.2/waifu-tips.json")
    </script>
</body>
</html>
EOF

👁📚86 posts