今天给大家介绍 Sakura博客主题添加Live2D看板娘 ，其实这个和什么主题 或者说Hexo还是Wordpress没太大影响，这个插件已经被大佬们集成的很简单了。然后又有很多大佬自己搞美化，所以 ...不BB了直接开始算了

地址

1. 官方仓库地址
2. 大佬美化过的仓库地址
3. 我自己备份的仓库地址

使用

自建CDN

放到Github仓库配合Jsdelivr 的cdn加速即可， 使用jsDelivr+github搭建免费的cdn 以前写过了,自己可以去看看，这里就不详细说了。

Wordpress Sakura主题

我们需要在主题的header.php加入一个CSS，footer.php加入一个JS

1.header.php

header.php加入下面的CSS外链

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

2.footer.php

footer.php加入下面的js标签

<script src="https://cdn.jsdelivr.net/gh/yremp/live2d@1.0/autoload.js"></script>

然后上传更新修改的文件应该就可以看到效果了

Hexo Sakura主题

Hexo的话不同的主题结构可能有所不同，这里我只介绍Sakura主题的吧，很久没用Hexo的Sakura主题了，我直接用以前下载的初始化包来弄吧。head.ejs、footer.ejs也是需要分别加入两个标签CSS、JS。

head.ejs

header.ejs加入下面的CSS外链

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

footer.ejs

footer.php加入下面的js标签

<script src="https://cdn.jsdelivr.net/gh/yremp/live2d@1.0/autoload.js"></script>

查看效果

貌似有点小问题，左侧菜单没加载出来，后面再研究一下原因吧。

自定义

1. waifu-tips.json 中包含了触发条件（selector，选择器）和触发时显示的文字（text）；
2. waifu.css 是看板娘的样式表。

waifu-tips.json

上面是样式表和触发之后对应的Tips，因为是别人自己修改过，如果想要自定义可以把项目下载下来修改以后放到Github使用Jsdelivr的CDN加速，如果你直接使用我的链接是没办法自己修改Tips也就是对话的内容。最后感谢大佬的美化，我自己之前也尝试美化过一个Live2D插件，效果不是很理想（论前端的重要性）

标签云

ajax AOP Bootstrap cdn Chevereto CSS Docker Editormd GC Github Hexo IDEA JavaScript jsDeliver JS樱花特效 JVM Linux Live2D markdown Maven MyBatis MyBatis-plus MySQL Navicat Oracle Pictures QQ Sakura SEO Spring Boot Spring Cloud Spring Cloud Alibaba SpringMVC Thymeleaf Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运 通信原理