今天给大家介绍 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/[email protected]/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/[email protected]/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 Hexo IDEA IPA JavaScript jsDeliver JS樱花特效 Linux markdown Maven MyBatis MyBatis-plus MySQL Navicat Oracle Pictures QQ Sakura SEO shadowrocket Spring Boot SpringMVC SSR Thymeleaf V2ray Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运 苹果iOS国外账号 苹果IOS账号 通信原理

本文最后更新于2020年3月23日,已超过 2 个月没更新!