以Butterfly主题为例，在[Blogroot]\themes\butterfly\source\目录下打开终端,输入

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

这行指令的意思就是clone这个项目到source路径下并重命名为live2d-widget。emm，貌似本来就叫live2d-widget。反正算是一个踩坑点。如果是用下载项目压缩包，解压后放到这里的，也记得把文件夹更名为live2d-widget。

找到路径[Blogroot]\themes\butterfly\source\live2d-widget\autoload.js，打开autoload.js，修改内容：

1
2
- const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
+ const live2d_path = "/live2d-widget/";

此处引用一下参考教程原话：autoload.js中的注释的绝对地址指的是，将资源打包放到[Blogroot]/theme/next/source中后，以[Blogroot]/theme/next/source为根目录（/）的绝对路径。

在Butterfly的主题配置文件[Blogroot]_config.butterfly.yml中,
butterfly主题其实自带fontawesome依赖，无需引入，

1
2
3
4
5
6
7
8
9
# Inject
    # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
    # 插入代码到头部 </head> 之前 和 底部 </body> 之前
    inject:
      head:
        # - <link rel="stylesheet" href="/xxx.css">
      bottom:
        # - <script src="xxxx"></script>
+       - <script defer src="/live2d-widget/autoload.js"></script>

保存所有文件的修改，然后照例执行
1
2
3
hexo clean
hexo g
hexo s

就能在localhost:4000看到预览了。

自定义修改

有一定前端基础的小伙伴可以通过修改[Blogroot]\themes\butterfly\source\live2d-widget路径下的样式资源文件：

waifu-tips.js:包含了按钮和对话框的逻辑

waifu-tips.json :定义了触发条件（selector，CSS 选择器）和触发时显示的文字（text）；

waifu.css:看板娘的样式表。可以对看板娘的位置布局等做自定义修改。