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

版权声明：转载请保留原文链接及作者 https://blog.csdn.net/u011236348/article/details/88169549

前言

更多效果展示，请访问我的 个人博客。

效果图：

教程：

• 小白水平：

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

1. 安装模块，如下：

npm install --save hexo-helper-live2d

1. 在

   站点配置文件

   或

   主题配置文件

   中新增如下内容：

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

1. 小白水平，效果如下：
   

• 大神水平：

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

1. 下载 张书樵大神的项目，解压到本地博客目录的

   themes/next/source

   下，修改

   autoload.js

   文件，如下：
   将

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

改为

const live2d_path = "/live2d-widget/";

1. 在

   /themes/next/layout/_layout.swing

   中,新增如下内容：

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

1. 在

   主题配置文件

   中,新增如下内容：

live2d:
enable: true

1. 想修改看板娘大小、位置、格式、文本内容等，可查看并修改

   waifu-tips.js

   、

   waifu-tips.json

   和

   waifu.css

   。
2. 大神水平，效果如下：