[转载]hexo-next主题安装看板娘（会说话，会拍照）

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

---

效果图：

教程：

• 小白水平：

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

1. 安装模块，如下：

npm install --save hexo-helper-live2d
复制代码

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

# 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/[email protected]/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/[email protected]/assets/wanko.model.json # 你的自定义 url
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true # 手机中是否展示

3. 小白水平，效果如下：
   image

• 大神水平：

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

1. 下载 张书樵大神的项目，解压到本地博客目录的 themes/next/source 下，修改文件夹名为 live2d-widget，修改项目中的 autoload.js 文件，如下：
   将

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

改为

const live2d_path = "/live2d-widget/";

2. 在/themes/next/layout/_layout.swing中,新增如下内容：

3. 在 主题配置文件 中,新增如下内容：

live2d:
  enable: true

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

5. 大神水平，效果如下：

后记

注意：大神的项目需要 jQuery 和 font-awesome 支持。我的项目因为其他插件需要，所以在很早之前就下载这两个文件到本地关联了，因此不需要再重复添加。若是没有添加依赖的小伙伴，可以在页面中加载。例如在 中加入：

或是像我一样，将这两个文件下载到本地，再关联。

转载https://juejin.im/post/5c7dd9995188251bb13bb05e