前言

看着很多博客都有live2D的萌萌哒看板娘,非常羡慕。趁着闲下来的时间,也添加了一个。

代码项目

依赖 Dependencies

需要Font Awesome (v4 或 v5) 图标支持,请确保相关样式表已在页面中加载。以 Font Awesome v4 为例,请在 <head> 中加入:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

否则图标将无法正常显示。(如果网页中已经加载了任何版本的 Font Awesome,就不要重复加载了)如果跟我一样使用sakura主题自带Font Awesome,此步跳过

步骤

API使用

1.如果像我一样是小白,或者只需要最基础的功能,就只用把这一行代码,一般放到 html 的 </body> 标签之前即可:

<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

2.进阶版自己修改配置

1)首先在代码项目中下载项目代码
2) 了解项目代码结构:
目录结构文件

waifu-tips.js 包含了按钮和次级的逻辑;
waifu-tips.json中定义了触发条件(selector,CSS选择器)和触发时显示的文字(text);
waifu.css 是看板娘的样式表。
autoload.js 中的 apiPath: 为 live2d API 接口,默认即可,如果你有其他的也可以修改
autoload.js 中的 cdnPath: 为对象存储路径,注意跨域的问题,不使用请注释掉

3) 一般我们只要修改 waifu-tips.json 文件触发内容,本地调用 autoload.js 即可。


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。