Hexo博客本身是支持看板娘的，但是原本的只有一个人物，这里使用stevenjoezhang大佬的魔改版，一个可以说话，可以换装的看板娘。
注意：如果你并不熟悉 Git，也不熟悉 GitHub ，那么请先 Google 了解基本使用。
基本使用
请先仔细阅读项目的README.md文件。看板娘需要 jQuery 和 Font Awesome 支持，别忘了引入自己的博客。
向 Next 中添加看板娘，找到themes\next\layout_layout.swing文件，在最后添加如下代码:
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
编辑主题配置文件 themes\next\_config.yml在最后添加如下内容：
# 启用看板娘
live2d:
enable: true
重新部署博客hexo s --debug打开浏览器输入http://localhost:4000/大概默认效果如下：
默认效果
个性定制
1.将 live2d-widget 仓库Fork一份到自己的仓库，git clone到本地电脑。
项目配置文件说明
-
autoload.js：自动加载看板娘 -
waifu.css：看板娘样式 -
waifu-tips.js：看板娘说话的脚本 -
waifu-tips.json：看板娘说话的内容
2.在autoload.js的开头定义了加载看板娘的路径，这里替换为自己仓库的地址：
修改cdn资源地址
这里使用jsdelivr提供的cdn服务,
CodeHaotian请替换为自己的github用户名。为了使用cdn服务，需要发布版本，@后面为等下发布的版本号。
3.在waifu.css中修改看板娘样式，属性都可通过浏览器控制台查看变化找寻。
看板娘位置调右
工具栏调左
4.修改waifu-tips.js中的初始加载模型，当你切换角色时编号在浏览器Console中有提示。
查看模型
修改看板娘初始模型
5.将修改后的版本提交到自己的仓库，为了使用免费的cdn需要发布一个新版本。
git add .
git commit -m "new live2d widget"
git push origin master
发布版本1
发布版本2
发布版本3
6.在themes\next\layout_layout.swing文件，修改为最新发布的版本：
<!-- 引入看板娘,记得更改为自己的用户名和版本号 -->
<script src="https://cdn.jsdelivr.net/gh/CodeHaotian/live2d-widget@1.0.0/autoload.js"></script>
7.重新部署博客，效果如下：
最新模型
网友评论