文章来源:https://akilar.top/posts/5b8f515f/
Live2d Widget(看板娘)
在使用前我们需要了解一下命名分别是什么意思有什么作用?
hexo c // 启动本地项目
// 当部署上去后
hexo clean // 清除原文件中不需要的信息,可以理解成清空缓存
hexo g // 重新生成静态页面
hexo d // 重新部署
安装看板娘
Hexo 可以支持使用插件,这时候我们就可以利用插件设置 Live2d Widget(看板娘),可以加入自己的网站内。hexo是有自带的看板娘,这孩子不会说话也不能换装,只会跟着你的鼠标晃动脑袋,不过有几款超可爱。可以在这里查看部分模型的预览图:模型预览
1、安装插件(在根目录下 下载安装插件)
npm install --save hexo-helper-live2d
2、找到 根目录下的 _config.yml 文件,找到空位子放下面代码,本人一般放在最底部
# Live2D live2d: enable: true #开关插件版看板娘 scriptFrom: local # 默认 pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径) pluginJsPath: lib/ # 脚本文件相对与插件根目录路径 pluginModelPath: assets/ # 模型文件相对与插件根目录路径 # scriptFrom: jsdelivr # jsdelivr CDN # scriptFrom: unpkg # unpkg CDN # scriptFrom: https://npm.elemecdn.com/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中 debug: false # 调试, 是否在控制台输出日志 model: use: live2d-widget-model-wanko # 路径 display: position: right #控制看板娘位置 width: 150 #控制看板娘大小 height: 300 #控制看板娘大小 mobile: show: true # 手机中是否展示
弄完这些我们需要重新启动项目
hexo clean
hexo g
hexo s
更换看板娘
1、安装
npm install --save live2d-widget-model-koharu
2、配置
model:
use: live2d-widget-model-koharu
# 默认为live2d-widget-model-wanko
重新启动项目打开网站就能看到效果了
hexo clean
hexo g
hexo s
卸载
如果说不需要也可以卸载掉,打开根目录输入下面
npm uninstall hexo-helper-live2d // 卸载看板娘插件
npm uninstall live2d-widget-model-modelname // 卸载看板娘模型。记得替换modelname为看板娘名称
大神魔改看板娘(会说话,能换装)
有幸看到大神改版后的看板娘确实不错惹人喜欢,直接爱了爱了。
首先是 next 主题的魔改版
根目录\themes\next\source
git clone https://github.com/stevenjoezhang/live2d-widget.git live2d-widget
代码意思是 使用 git 拉取并复制远端仓库 /live2d-widget.git 文件并且重命名为 live2d-widget
找到 根目录\themes\next\source\live2d-widget\autoload.js 并打开 autoload.js
注释或删除下面代码
const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
解开下面代码
const live2d_path = "/live2d-widget/";
在去 在/themes/next/layout/_layout.swing 文件里,找到 <head> 标签 添加下面代码
<link rel="stylesheet" href="https://npm.elemecdn.com/font-awesome/css/font-awesome.min.css"/ media="defer" onload="this.media='all'">
找到 <body> 标签添加下面代码
<script defer src="/live2d-widget/autoload.js"></script>
在 根目录/themes/next/_config.yml 底部添加下面代码
live2d:
enable: true
保存后重新启动就可以了
hexo clean
hexo g
hexo s
Butterfly主题的魔改版
根目录\themes\next\source
git clone https://github.com/stevenjoezhang/live2d-widget.git live2d-widget
找到 根目录\themes\butterfly\source\live2d-widget\autoload.js 并打开 autoload.js
注释或删除下面代码
const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
解开下面代码
const live2d_path = "/live2d-widget/";
在 根目录\_config.butterfly.yml 文件加入下面代码,如果没有 _config.butterfly.yml 这个文件,请观看前面文章。
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
bottom:
# - <script src="xxxx"></script>
- <script defer src="/live2d-widget/autoload.js"></script>
完成后重新启动即可
hexo clean
hexo g
hexo s
自定义修改方式(两个主题都适用)
可以通过修改[Blogroot]\themes\butterfly\source\live2d-widget
路径下的样式资源文件:
waifu-tips.js:包含了按钮和对话框的逻辑
waifu-tips.json :定义了触发条件(selector,CSS 选择器)和触发时显示的文字(text);
waifu.css:看板娘的样式表。可以对看板娘的位置布局等做自定义修改。
个人建议
如果网站配置了出不来,可以将代码设置成下面这样,找到 根目录\themes
\主题文件\live2d-widget\autoload.js
// 加载 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/"
});
});
}
因为模型配置路径不同才导致无法换装的。所以其实只要注意配置模型时,保证每个可以展示的模型都有相应的index.json
并且在model_list.json
里有相应的模型路径就可以了。可以参考大神配置的路径项目和原项目的区别
找到 根目录\themes
\主题文件\live2d-widget\autoload.js,修改下面代码
// 加载 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/"
cdnPath: "https://npm.elemecdn.com/akilar-live2dapi@latest/"
//因为jsdelivr不支持50MB以上的包的加速,可能报403错误,所以用的vercel的CDN服务。
//可以考虑clone大神配置好的live2d_api仓库自己部署到其他更快的cdn服务上。
});
});
}