先上最终效果图

效果预览

教程:

准备工作:该项目需要 jQueryfont-awesome 支持。

本插件需要 jQueryFont Awesome 4.7.0 支持,请确保它们已在页面中加载,例如在 <head> 中加入:
jQuery and Font Awesome 4.7.0 is required for this plugin. You can add this to <head>:

1
2
3
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

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

hexo的官方是支持看板娘的,已经封装好了插件,但只是模型,不能说话、不能换装、功能较少。

1.安装模块
执行命令:npm install --save hexo-helper-live2d

2.在 站点配置文件 或 主题配置文件 中新增如下内容

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 # npm-module package name
# 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 # 手机中是否展示

官方版效果如下:

lARlWt.gif

  • 魔改版

功能齐全。能说话、能换装、能玩游戏、能拍照、还能自定义。

1.这里介绍一下 张书樵大神魔改项目。首先

git clone https://github.com/stevenjoezhang/live2d-widget.git

放在本地博客目录的 themes/butterfly(hexo主题名称)/source 下,修改文件夹名为 live2d-widget,修改项目中的 autoload.js 文件,如下:

1
const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";

改为

1
const live2d_path = "/live2d-widget/";

2.在 /source/data/butterfly(hexo主题名称).yml中新增/live2d-widget/autoload.js

1
2
3
4
5
6
7
8
9
10
11
CDN_USE:
css:
- /css/index.css
- https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
# - https://use.fontawesome.com/releases/v5.8.1/css/all.css #fontawesomeV5_css

js:
- https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js #/js/third-party/jquery.min.js
- /js/utils.js
- /js/main.js
- /live2d-widget/autoload.js #新增

3.在 /source/data/butterfly(hexo主题名称).yml中增加下面内容

1
2
live2d:
enable: true

4.想修改看板娘大小、位置、格式、文本内容等,可查看并修改 waifu-tips.jswaifu-tips.jsonwaifu.css

大功告成

最终效果预览

微信扫码即可关注公众号哟!