Hexo + Butterfly 搭建个人网站（三）Live2d 配置

Alpha.Jun

已于 2023-07-31 14:18:55 修改

阅读量984

点赞数 1

分类专栏： butterfly hexo 文章标签： javascript 开发语言 ecmascript

于 2023-07-30 22:42:20 首次发布

本文链接：https://blog.csdn.net/m0_69079573/article/details/132011737

版权

butterfly 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

hexo

4 篇文章 0 订阅

订阅专栏

文章来源：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服务上。
  		});
  	});
  }

Alpha.Jun

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
Hexo + Butterfly 搭建个人网站（三）Live2d 配置

可以通过修改waifu-tips.js:包含了按钮和对话框的逻辑waifu-tips.json :定义了触发条件（selector，CSS 选择器）和触发时显示的文字（text）；waifu.css:看板娘的样式表。可以对看板娘的位置布局等做自定义修改。
复制链接

扫一扫