hexo博客看板娘美化

效果展示：

我的博客

一、hexo matery/next主题简单版安装：

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

1.安装插件命令：

npm install --save hexo-helper-live2d

看板娘模型预览

2.选择一个自己喜欢的模型下载

npm install live2d-widget-model-z16 --save

3.在站点配置文件或者主题配置配置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 # 手机中是否展示

完了重新运行一下就OK。

二、进阶版（能说话、能换装、能玩游戏、能拍照）

相信不用我说你们都知道该配置哪一个了吧，具体教程如下：

安装进阶版需要先卸载掉之前安装的插件：

npm uninstall hexo-helper-live2d

1.下载大神的配置，git bash直接下载到\themes\next\source目录下

下载地址

2.修改autoload.js文件，将路径改为绝对路径

const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
改为
const live2d_path = "/live2d-widget/";
在文件中去掉注释就行了

截图：

3.matery主题：在\themes\hexo-theme-matery\layout\_partial\head.ejs文件中，新增以下内容：

放在< head>中，< /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"/>
<script src="/live2d-widget/autoload.js"></script>

next主题：在/themes/next/layout/_layout.swing文件中，还是新增上面的内容，位置都一样。

然后重新运行hexo clean，hexo g,可以预览，没有问题再部署上去。

4.修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js 、 waifu-tips.json 、waifu.css文件。

文件说明：
autoload.js:    自动加载看板娘；
waifu.css:      看板娘样式；
waifu-tips.js:  看板娘说话的脚本；
waifu-tips.json:看板娘说话的内容；