为博客添加基于Live2D的看板娘

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.重新部署博客，效果如下：

最新模型