不知道你们有没有这种体验，就是在逛别人的博客的时候，会在页面左下角或者右下角等界面看到一个会跟随鼠标移动而摇摆的图片动画，看起来还蛮不错，今天就为我的博客添加这样的动画效果 —- 看板娘。

普通看板娘

hexo的官方是支持看板娘的，已经封装好了插件，但只是模型，不能说话、不能换装、功能较少。
更多详情请查看hexo-helper-live2d官网

安装插件

1
npm install --save hexo-helper-live2d

下载模型

作者各种模型展示地址：live2d插件，可选择自己喜欢的模型，然后进行下载安装
模型仓库

  • live2d-widget-model-chitose
  • live2d-widget-model-epsilon2_1
  • live2d-widget-model-gf
  • live2d-widget-model-haru/01 (use npm install –save live2d-widget-model-haru)
  • live2d-widget-model-haru/02 (use npm install –save live2d-widget-model-haru)
  • live2d-widget-model-haruto
  • live2d-widget-model-hibiki
  • live2d-widget-model-hijiki
  • live2d-widget-model-izumi
  • live2d-widget-model-koharu
  • live2d-widget-model-miku
  • live2d-widget-model-ni-j
  • live2d-widget-model-nico
  • live2d-widget-model-nietzsche
  • live2d-widget-model-nipsilon
  • live2d-widget-model-nito
  • live2d-widget-model-shizuku
  • live2d-widget-model-tororo
  • live2d-widget-model-tsumiki
  • live2d-widget-model-unitychan
  • live2d-widget-model-wanko
  • live2d-widget-model-z16

使用npm install {packagename}进行安装，如：

1
npm install live2d-widget-model-shizuku -S

配置

在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中新增如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-wanko # 第二步下载的模型
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true # 手机中是否展示

上效果图：

升级看板娘(能说话、能换装)

安装

  1. 下载live2d文件
  2. 将下载好的live2d文件解压到
    1
    2
    首先在/themes/Butterfly/source/下创建live2d-widget目录，
    然后将lived2文件解压到 项目根目录/themes/Butterfly/source/live2d-widget
  3. 更改live2d-widget下的autoload.js文件。里面的内容已经写好了，注释第二行，取消第三行的注释就行了。
    1
    2
    3
    // 注意：live2d_path 参数应使用绝对路径
    //const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
    const live2d_path = "/live2d-widget/";
  4. 更改主题配置文件_config.butterfly.yml:
    由于live2d-widget内部使用了font-awesome，所以我们需要引入<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
    1
    2
    3
    4
    5
    6
    7
    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:
        # - <script src="xxxx"></script>
  5. 在站点配置文件_config.yml或者Butterfly主题配置文件_config.butterfly.yml中,新增如下内容：
    1
    2
    live2d:
      enable: true
  6. 然后在项目根目录进行重新三连跪：
    1
    2
    3
    hexo clean
    hexo g
    hexo s
    然后就可以看到效果了。
  7. 默认看板娘是在左边，如果想要切换到右边只需要修改根目录/themes/Butterfly/source/live2d-widget/waifu.css:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    #waifu {
    	bottom: -1000px;
    	right: 0; // 这里默认是 left: 0;
    	line-height: 0;
    	margin-bottom: -10px;
    	position: fixed;
    	transform: translateY(3px);
    	transition: transform .3s ease-in-out, bottom 3s ease-in-out;
    	z-index: 1;
    }
    #waifu-tool {
    	color: #aaa;
    	opacity: 0;
    	position: absolute;
    	left: 0px; // 这里默认是 right: -10px;
    	top: 70px;
    	transition: opacity 1s;
    }