萌萌哒看板娘

众所周知，每个博客都应该有个萌萌哒看板娘（误）
因为感觉博客两边有点空荡荡的，所以决定加点什么进去，（当然是加看板娘啊！！！）

简介

项目地址

我使用的看板娘是github上一个live2d-widget的开源项目
Github项目链接：https://github.com/stevenjoezhang/live2d-widget

效果

安装

一、简单安装

该项目的资源文件是已经放到了cdn上，因此我们只需要简单的引入以下一行代码

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

在halo中进入主题，然后设置，以我现在使用的主题寒山为例
进入主题设置后，进入自定义面板，在此处

加上代码，点击保存即可

注意

由于项目使用了大量 ES6 语法，不支持 IE 11 等老旧浏览器。
还有就是该项目需要Font Awesome的图标的支持，如果你的网页中没有引入该样式，则需要加入以下代码

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

由于各个屏幕分辨率不同，导致默认大小的看板娘在100%缩放情况下在较低分辨率下会挡住博客内容，这样会影响观看体验，因此用了几天后我决定更改一下配置

二、自定义安装

1. 使用自己的版本

• 可以直接在服务器上通过git下载

git clone https://github.com/stevenjoezhang/live2d-widget.git

• 可以先下载zip，再上传到服务器
• 也可以直接fork到你的仓库，然后进行修改，最后添加script

2. 修改

我是fork到自己的仓库进行了修改，设置了下css，并修改autoload.js中的·live2d_path`

然后向使用简单安装一样添加script

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

将此处的kiritoghy替换为你的GitHub用户名。为了使CDN的内容正常刷新，需要创建新的git tag并推送至GitHub仓库中，然后就可以刷新页面查看效果了，cdn是有缓存的，如果效果没变可以等个一天左右。
如果你想立即查看修改的效果，也可以将@后面的latest改为你push的修改的sha值

保存修改后刷新，即可看到修改效果

如果你是选择通过自己的服务器加载，那么你需要修改该项目中的autoload.js中的live2d_path，将其修改为绝对路径
比如说，如果你能够通过

https://example.com/path/to/live2d-widget/live2d.min.js

访问到 live2d.min.js，那么就把 live2d_path 的值修改为

https://example.com/path/to/live2d-widget/

路径末尾的 / 一定要加上。
完成后，在你要添加看板娘的界面加入

<script src="https://example.com/path/to/live2d-widget/autoload.js"></script>

就可以加载了。

3. 更多自定义

当然还有更多可自定义的配置
例如看板娘说的文字，这个可以在waifu-tips.json中修改

也可以根据api自行构建后端，具体可参见原项目文档