给博客加上看板娘

萌萌哒看板娘

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

简介

项目地址

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

效果

image.png

安装

一、简单安装

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

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

在halo中进入主题,然后设置,以我现在使用的主题寒山为例
进入主题设置后,进入自定义面板,在此处
image.png
加上代码,点击保存即可

注意

由于项目使用了大量 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`
image.png

image.png
然后向使用简单安装一样添加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值
image.png
保存修改后刷新,即可看到修改效果

如果你是选择通过自己的服务器加载,那么你需要修改该项目中的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中修改
image.png
也可以根据api自行构建后端,具体可参见原项目文档