Hexo + Icarus3 + live2d 给博客添加看板娘

Hexo + Icarus3 + live2d 给博客添加看板娘

下载live2D

进入博客根目录 blog/ 执行如下命令

$ cd themes/icarus/source	# 进入主题的 source 目录
$ git clone https://github.com/stevenjoezhang/live2d-widget.git 

修改配置

导入css依赖(非必须)

找到themes/icarus/layout/common/head.jsx 插入css依赖

大概是在一百六十多行的样子吧 或者可以在head.jsx内搜索<link>标签 然后插入这行

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>

修改后如下图

但是一般情况我们最好在 icarus 主题配置文件 _config.icarus.yml 中的 providers 项中的 iconcdn 值填写合适的CDN，而不直接修改 icarus 源文件。

# iconcdn: fontawesome
iconcdn: https://cdn.bootcdn.net/ajax/libs/font-awesome/5.12.0/css/all.css

修改刚下载的 live2d-widget 下的autoload.js

注释掉第二行，放开第三行

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

修改后的autoload.js如下图

在主题内导入autoload.js

导入的前提是 live2d-widget 文件夹的位置在 themes/icarus/source 下

找到 theme/icarus/layout/common/scripts.jsx 在末尾处 <Fragment> 标签内添加

<script src={url_for('/live2d-widget/autoload.js')}></script>

开启 live2d

编辑主题配置文件_config.yml 添加

live2d:
  enable: true

这样一个漂亮的看板娘就引入完成了！

常见问题

看板娘到这儿应该就可以出来了 但是有部分老旧的 icarus 主题版本可能会在 icarus 的样式下面，这时候需要把看板娘给置顶。

找到live2d-widget下的waifu.css 修改33行id为#waifu的样式 把z-index:1修改为z-index:1000；

估计作者修改了，反正我是没遇到~