给butterfly主题添加看板娘live2d

效果图

简单版

使用 hexo-helper-live2d ，善用搜索。

威力加强版

如果使用了hexo-helper-live2d，需要先卸载。

下载

大神魔改后的项目地址

下载解压到 themes\butterfly\source\ （或者 source\）文件夹下

必要配置

修改 autoload.js 文件中的 live2d_path 路径。直接使用第三行被注释掉的路径即可，记得注释掉第二行。

1
2
3

// 注意：live2d_path 参数应使用绝对路径
// const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
const live2d_path = "/live2d-widget/";

默认的 cdnPath 需要开启CDN服务，否则会失效，可选择使用 apiPath 。

// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {
	Promise.all([
		loadExternalResource(live2d_path + "waifu.css", "css"),
		loadExternalResource(live2d_path + "live2d.min.js", "js"),
		loadExternalResource(live2d_path + "waifu-tips.js", "js")
	]).then(() => {
		initWidget({
			waifuPath: live2d_path + "waifu-tips.json",
			apiPath: "https://live2d.fghrsh.net/api/",
			// cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
		});
	});
}
// initWidget 第一个参数为 waifu-tips.json 的路径，第二个参数为 API 地址
// API 后端可自行搭建，参考 https://github.com/fghrsh/live2d_api
// 初始化看板娘会自动加载指定目录下的 waifu-tips.json

在 _config.butterfly.yml 中找到 inject 部分引入代码

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <script src="/live2d-widget/autoload.js"></script>
  bottom: