给网站添加一个能陪聊超萌的Live2d伊斯特瓦尔

应访客要求,想在自己的网站添加一个类似于技术宅二次元栏目这样的小人!

给网站添加一个能陪聊超萌的Live2d伊斯特瓦尔

其实,研究过Live2D的站长会觉得很简单,下面我将我参考过的教程网址列出,大家有想自己DIY的可以点击下面网站,不想DIY,想一步到位的可以直接看我下面的方法。

参考教程

给博客添加能动的看板娘(Live2D)-关于模型的二三事

网页添加 Live2D 看板娘

博客通用版Live2d伊斯特瓦尔发布

功能预览

    1. 1.可以基于图灵机器人的聊天功能(需要自己写接口,默认隐藏)。
    1. 2.能够随意移动并记录位置(关闭浏览器后失效)。
    1. 3.能够随意唤醒或者关闭并记录状态。
    1. 4.自动判断浏览器是否为IE或者手机浏览器,如果判断为true则不加载伊斯。
    1. 5.给骚扰伊斯加了限制频率,不能狂骚扰伊斯了

使用方法

去 码云 | GitHub 上克隆或下载最新的版本。

然后把解压出来的文件夹改名为:live2d 。

在需要页面的头部文件(header)引入界面样式,在 head 标签内插入如下代码:

在 需要页面的body 标签内找到合适的位置插入 Live2D 看板娘的元素,按照 Html 书写规范写:

在 需要页面的 body 标签结束前插入如下代码:

鼠标放在页面某个元素上时,需要 Live2D 看板娘提示的请修改 message.json 文件。

然后刷新页面,即可看到一个生动的小人了!

给网站添加一个能陪聊超萌的Live2d伊斯特瓦尔

补充说明

1、图灵机器APIphp版本:

前端调用(live2D默认包含,可忽略下文)

2、关于音乐按钮添加

在对应的按钮DIV中添加如下代码(具体位置为召唤伊斯特瓦尔上方即可)

 

原创文章,作者:飞鱼小岛主,如若转载,请注明出处。

联系我们

025-6604-5436

在线咨询:点击这里给我发消息

邮件:863051725@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code