matery添加live2d看板娘

一、克隆资源

找到 live2d-widget fork 一份到自己的仓库。地址： https://github.com/stevenjoezhang/live2d-widget

找到 live2d_api fork 一份到自己的仓库。地址： https://github.com/fghrsh/live2d_api

live2d-widget ：前端显示代码逻辑

live2d_api：live2d 动画核心 api，以及存放 live2d 模型资源

纸飞机彩蛋：http://www.websiteasteroids.com/，仓库地址：https://github.com/stevenjoezhang/asteroids

二、配置CDN

JSDELIVR 一个免费快速的 CDN，官方地址：https://www.jsdelivr.com/

下载 live2d-widget，在 autoload.js 脚本，修改 CDN 加载路径： live2d_path、cdnPath @后面为仓库的 Tag

在 waifu-tips.js 脚本修改 个人信息链接地址和纸飞机代码地址：

目录结构：

• waifu-tips.js 包含了按钮和对话框的逻辑
• waifu-tips.json 中定义了触发条件（selector，CSS 选择器）和触发时显示的文字（text）
• waifu.css 是看板娘的样式表

修改完后，需要新建对应的 Tag

在对应的 GitHub 仓库 新建 Release 版本

CDN 生效是需要一段时间的，根据测试大概需要 1分钟左右

可以通过直接在浏览器中访问对应地址，查看是否生效完成

三、植入 Matery 主题

在 head.ejs 中，添加对应脚本引用

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

live2d 需要 font-awesome 库，默认 matery 已经添加了，如过因为一些原因没有添加需要手动添加如下代码：

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