Hexo博客NexT主题美化之新增看板娘(能说话、能换装)

今天在逛别博客的时候,发现了高级版的看板娘,很是心动,马上给自己的博客也来了一个。
更多效果展示,请访问我的个人博客

1、最终效果图

效果图

2、教程:

2.1、小白水平:

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

2.1.1、安装模块,如下:

1
npm install --save hexo-helper-live2d

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

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

选择自己喜欢的模型可以参考我下面的一篇博客—–Hexo博客美化

2.1.2、小白水平,效果如下:

小白水平效果图
这里主要介绍的是大神水平,想弄这样比较低级一点的可以参考我的另外一篇博客——Hexo博客美化

2.2、大神水平:

大神作品,功能齐全。能说话、能换装、能玩游戏、能拍照、还能自定义。

2.2.1、下载张书樵大神的项目,解压到本地博客目录的themes/next/source下,修改autoload.js文件,如下:

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

改为

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

2.3、在/themes/next/layout/_layout.swing中,新增如下内容:

1
<script src="/live2d-widget/autoload.js"></script>

2.4、在 主题配置文件 中,新增如下内容:

1
2
live2d:
enable: true

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

2.6、大神水平,效果如下:

大神水平效果图

-------------本文结束感谢您的阅读-------------
木槿前端不求人,有空就来坐坐。
0%