Hexo 中 Butterfly主题和看板娘的使用

默认的 Hexo 主题为 landscape，我选择了 Butterfly 作为博客主题

Butterfly 主题使用

Butterfly 安装

Git 安装
在博客的根目录执行

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

安装完成后可在 根目录/themes/butterfly 查看主题文件夹

应用主题

修改博客根目录的配置文件 _config.yml，把主题改为 butterfly

theme: butterfly

安装插件

如果你没有 pug 和 stylus 的渲染器，需要安装

npm install hexo-renderer-pug hexo-renderer-stylus --save

升级建议

把主题文件夹中的_config.yml 复製到 Hexo 根目录里，同时重新命名为 _config.butterfly.yml。
以后只需要在_config.butterfly.yml进行配置就行。

Hexo会自动合并主题中的_config.yml和 _config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。

看板娘的使用

先来看看效果吧

下载 live2D

live2D文件
先在github 上将文件压缩包下载下来，然后解压，放置在目录 博客根目录/themes/butterfly/source/ 中（我这里是把文件夹名改Wie live2d-widget）

更改 autoload.js 文件

更改 live2d-widget 下的 autoload.js 文件，其实只需要将第二行注释掉，取消第三行的注释即可

// 注意：live2d_path 参数应使用绝对路径
// const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
const live2d_path = "/live2d-widget/";

添加资源文件

在 博客根目录的主题配置文件 _config.butterfly.yml 中找到 inject 并修改，引入 css 文件和 js 文件即可

inject:
  head:
  # - <link rel="stylesheet" href="/xxx.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
    <script src="/live2d-widget/autoload.js"></script>
  bottom:

启用 live2d

可以在 博客根目录的主题配置文件 _config.butterfly.yml 最后新增以下内容

live2d:
  enable: true

最后，执行命令即可看到效果（同时要注意 public 文件夹中有没有生成 live2d-widget 文件夹）

hexo clean
hexo g
hexo s