添加看板娘

Butterfly主题魔改教程，添加看板娘。

我的博客主题版本为：hexo5.4、Butterfly3.6.2

如果与我的版本不一样可能会有略微差别，届时请自行百度。

本文参考文章：Akilarの糖果屋的《Live2d Widget》。

1.说明

此魔改参考：Akilarの糖果屋的《Live2d Widget》教程贴中的大神魔改看板娘（会说话，能换装）部分。并通过修改waifu.css文件调整了看板娘布局位置。

2.魔改步骤

以Butterfly主题为例，在[Blogroot]\themes\butterfly\source\目录下打开终端,输入
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，修改内容：
- 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依赖，无需引入）修改配置：

    # 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>

保存所有文件的修改，然后照例执行
hexo clean
hexo g
hexo s
自定义修改
有一定前端基础的小伙伴可以通过修改[Blogroot]\themes\butterfly\source\live2d-widget路径下的样式资源文件：
- waifu-tips.js:包含了按钮和对话框的逻辑
- waifu-tips.json :定义了触发条件（selector，CSS 选择器）和触发时显示的文字（text）；
- waifu.css:看板娘的样式表。可以对看板娘的位置布局等做自定义修改。

3.Bug归纳

Bug1：在配置了gulp和pwa之后，看板娘消失。这个是gulp-babel压缩导致的。

尝试操作：一开始博主通过在gulpfile.js里添加屏蔽配置，让gulp不要压缩看板娘的静态资源，但是似乎是因为pwa的缘故，在本地预览重新出现的看板娘在部署到网页以后依然不出现。

解决方案：
1. 直接把看板娘提取出来作为单独的项目，然后借助jsdelivr引用相应的静态资源。live2d-widget文件夹不放在博客的source目录中，而是存在独立的github仓库里。这样gulp怎么也压缩不到。而且得益于jsdelivr，看板娘的加载速度也有所提高。
2. 配置方法是将live2d-widget项目fork到自己的仓库（用原项目也可以，但是那样不方便更改样式啊），然后修改autoload.js里的路径为你自己的仓库名。
  - const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
  + const live2d_path = "https://cdn.jsdelivr.net/gh/YourGithubName/live2d-widget/";
3. 在主题配置项里也可以使用https://cdn.jsdelivr.net/gh/YourGithubName/live2d-widget/autoload.js来引入。