今天给大家介绍 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

这是json内容,可以根据需要修改

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

标签云

ajax AOP Bootstrap cdn Chevereto CSS Docker Editormd Github Hexo IDEA JavaScript jsDeliver JS樱花特效 Linux Live2D markdown Maven MyBatis MyBatis-plus MySQL Navicat Oracle Pictures QQ Sakura SEO Spring Boot SpringMVC SSR Thymeleaf V2ray Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运 苹果iOS国外账号 谷歌 通信原理