萌萌的看板娘不仅B格上来了，还能在你遨游知识的海洋时进行互动，可萌可看家，还等什么，动手吧~
一、简单模式
1. 安装hexo-helper-live2d插件
1
2
| npm uninstall hexo-helper-live2d
# 检查博客主目录下面的 package.json里是否有"hexo-helper-live2d": "^3.0.3" 依赖
|
1
| npm install --save hexo-helper-live2d
|
注意： 命令都是在博客主目录执行
https://github.com/xiazeyu/live2d-widget-models.git
3. 下载好之后将packages里的所有动画模板拷贝到博客的node_modules目录里
- 注意：拷出的文件跟
live2d-widget文件夹平级
4. 把下面的配置复制到博客站点配置文件_config.yml 最下面
1
2
3
4
5
6
7
8
9
10
11
| live2d:
enable: true
pluginModelPath: assets/
model:
use: live2d-widget-model-epsilon2_1
display:
position: right
width: 150
height: 300
mobile:
show: false
|
5. 配置完成之后执行三部曲就OK了：
1
2
3
| hexo clean # 清理
hexo g # 构建
hexo s # 运行
|
二、困难模式
1. 把之前的live2d卸载掉 npm uninstall hexo-helper-live2d
2. 下载配置 戳这里
4. 然后修改autoload.js文件，将路径改为绝对路径
1
2
3
|
const live2d_path = "/live2d-widget/";
|
5. 引入链接 ，修改_layout.swing文件（复制到head标签中）
- 有一些主题,路径在
/themes/主题名字/layout/_partial/head.ejs目录下
- 我自己使用的next主题,是在
/themes/next/layout/_layout.swing目录下
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"/>
<script src="/live2d-widget/autoload.js"></script>
|
添加之后如下：
1
2
3
4
5
6
7
8
9
10
11
| <head>
{{ partial('_partials/head/head.swig', {}, {cache: theme.cache.enable}) }}
{% include '_partials/head/head-unique.swig' %}
{{- next_inject('head') }}
<title>{% block title %}{% endblock %}</title>
{{ partial('_third-party/analytics/index.swig', {}, {cache: theme.cache.enable}) }}
{{ partial('_scripts/noscript.swig', {}, {cache: theme.cache.enable}) }}
<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"/>
<script src="/live2d-widget/autoload.js"></script>
</head>
|
想修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js 、 waifu-tips.json 、waifu.css文件
链接参考
