前言
更多效果展示，请访问我的 个人博客。
效果图：
image
教程：
- 小白水平：
hexo的官方是支持看板娘的，已经封装好了插件，但只是模型，不能说话、不能换装、功能较少。
- 安装模块，如下：
npm install --save hexo-helper-live2d
- 在
站点配置文件或主题配置文件中新增如下内容：
# 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 # 手机中是否展示
- 小白水平，效果如下：
[站外图片上传中...(image-31cdc8-1569137806964)]
- 大神水平：
大神作品，功能齐全。能说话、能换装、能玩游戏、能拍照、还能自定义。
- 下载 张书樵大神的项目，解压到本地博客目录的
themes/next/source下，修改文件夹名为live2d-widget，修改项目中的autoload.js文件，如下：
将
const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
改为
const live2d_path = "/live2d-widget/";
- 在
/themes/next/layout/_layout.swig中,新增如下内容：
<script src="/live2d-widget/autoload.js"></script>
- 在
主题配置文件中,新增如下内容：
live2d:
enable: true
- 想修改看板娘大小、位置、格式、文本内容等，可查看并修改
waifu-tips.js、waifu-tips.json和waifu.css。 - 大神水平，效果如下：
[站外图片上传中...(image-5743ce-1569137806964)]
后记
注意：大神的项目需要 jQuery 和 font-awesome 支持。我的项目因为其他插件需要，所以在很早之前就下载这两个文件到本地关联了，因此不需要再重复添加。若是没有添加依赖的小伙伴，可以在页面中加载。例如在 <head> 中加入：
<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">
或是像我一样，将这两个文件下载到本地，再关联。
因为最近工作比较忙，没有时间更新博客。由于我的疏忽，漏掉了后记中比较关键的文件依赖和大神项目文件夹的重命名，导致很多小伙伴无法实现大神项目的效果。我感到非常抱歉，同时，非常感谢 留言的大神们 对本博客的批评指正，后期我会提升博客质量和更新频率。再次感谢！
网友评论