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

川长思鸟来 2022-12-03 15:55 196阅读 0赞

默认的 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`的配置，其优先度较高。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center]

# 看板娘的使用 #

先来看看效果吧  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center 1]

## 下载 live2D ##

[live2D文件][live2D]  
先在github 上将文件压缩包下载下来，然后解压，放置在目录 `博客根目录/themes/butterfly/source/` 中（我这里是把文件夹名改Wie live2d-widget）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center 2]

## 更改 autoload.js 文件 ##

更改 live2d-widget 下的 autoload.js 文件，其实只需要将第二行注释掉，取消第三行的注释即可  
![在这里插入图片描述][20200904161340111.png_pic_center]

// 注意：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 文件即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center 3]

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 文件夹）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center 4]

hexo clean
    hexo g
    hexo s

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c5d2e571159a4c52aded4fae1e2a4ab5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/2606151e777345f5bea7a7890d2a2bec.png
[live2D]: https://github.com/stevenjoezhang/live2d-widget
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/d0296ac1f6984403a925c30119655b26.png
[20200904161340111.png_pic_center]: /images/20221123/378fb5b8d07047b6a77e7f74c4d9caac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/9875e77b68e6445abac437e7f83d029d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/65124e624e3d41d8a4465209d3d6948b.png