前置准备

确认你的Hexo博客根目录已正常运行Butterfly 5.7主题，且已完成基础依赖安装

方案一

一、拉取完全版看板娘源码

1，进入Hexo博客的themes/butterfly/source目录
2，执行Git命令拉取官方全功能看板娘仓库：

1
git clone https://github.com/stevenjoezhang/live2d-widget.git live2d-widget

等待克隆完成后，会在当前目录生成完整的live2d-widget文件夹

二，修改核心配置文件

1，打开live2d-widget\dis目录下的autoload.js文件
2，注释掉默认的CDN远程加载路径，替换为本地资源加载路径

1
2
// const live2d_path = 'https://fastly.jsdelivr.net/npm/live2d-widgets@1.0.1/dist/';
   const live2d_path = '/live2d-widget/dist/';

三，Butterfly主题注入配置
1，打开Butterfly 5.7主题的配置文件_config.butterfly.yml
2，在inject配置项中添加入口脚本注入规则：

1
2
3
4
5
6
7
inject:
  head:
    # 引入 FontAwesome (看板娘图标需要)
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  bottom:
    # 引入Live2D 看板娘
    - <script src="/live2d-widget/dist/autoload.js"></script>

四，设置手机端显示看娘板工具栏
打开live2d-widget\dist目录下waifu.css文件，在末尾添加下面内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* ===== 看板娘完整配置 ===== */

/* 1. 强制人物一直显示，不透明（解决电脑端透明问题） */
#waifu {
  opacity: 1 !important;
}

/* 2. 工具栏基本定位（贴在人物旁边） */
#waifu-tool {
  position: absolute !important;
  bottom: 100px !important;       /* 高度，想更高改大 */
  right: -5px !important;         /* 看板娘在左边就改 left: -5px */
  z-index: 9999 !important;
  transform: none !important;
}

/* 3. 电脑端（>768px）：工具栏默认隐藏，鼠标移到人物上才显示 */
@media (min-width: 769px) {
  #waifu-tool {
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
  }
  #waifu:hover #waifu-tool {
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* 4. 手机端（≤768px）：工具栏一直显示 */
@media (max-width: 768px) {
  #waifu-tool {
    visibility: visible !important;
    opacity: 1 !important;
  }
}

方案二

下载看板娘备份文件到hexo\source目录下，不是themes\butterfly里面的source，live2d-widget

修改主题配置文件 _config.butterfly.yml 添加下面内容

1
2
3
4
5
6
7
8
inject:
  head:
      # 引入 FontAwesome 图标库（看板娘菜单需要）
      - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">    

  bottom:
       # Live2D 看板娘
       - <script src="/live2d-widget/autoload.js"></script>

在这里插入图片描述