安装插件与模型配置

前言：这是一篇基于hexo架构和的配置，主要使用了live2d插件实现看板娘功能，最终效果和左下角类似（左下角为进阶效果，进阶教程见文末链接）

安装live2d插件

在你博客的根目录打开git bash或cmd，输入以下指令以安装插件

1	npm install --save hexo-helper-live2d

选择模型并下载

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

其中packagename就是你要安装的模型，常见的模型见https://github.com/imuncle/live2d或[Eikanya/Live2d-model: Live2d model collection (github.com)](https://github.com/Eikanya/Live2d-model)，这里有[模型预览地址](https://imuncle.github.io/live2d/),这里以为例live2d-widget-model-z16为例。

可选择的模型：

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

修改主题配置文件

在Hexo主题_config.yml文件中添加以下内容：

live2d:
  enable: true    # 是否启用看板娘
  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-z16 # npm-module 包的名字
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 200
    height: 400
    position: left    # 左侧还是右侧
    hOffset: -30
    vOffset: -20    # 距底部距离
  mobile:
    show: false    # 手机端是否可见，建议不可见否则可能影响阅读
    scale: 0.5
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

模型预览

素质三连

1	hexo cl & hexo g hexo s

添加文本框对话功能

以上只有基本功能，以下将做一些进阶的设置

浮现hitokoto文字

这里我们使用语句接口 | 一言开发者中心提供的api接口https://v1.hitokoto.cn，每天返回一句不同的话

在刚刚添加live2d的_config.yml中添加以下代码：

live2d:
  enable: true
  dialog:
    enable: true
    hitokoto: true

这样就可以在看板娘上方显示文本框

自定义文本

解决方案

修改配置文件_config.yml

live2d:
  enable: true # 是否启用看板娘
  dialog:
    enable: true
    # hitokoto: true
    text:
      - 汪
      - 汪汪
      - 汪呜

这里的text 变量名是自定义的，和后面的config.dialog.text 对应即可

[Blogroot]\node_modules\live2d-widget\src\dialog\index.js，添加函数

function randomSelection(obj) {
  return Array.isArray(obj) ? obj[Math.floor(Math.random() * obj.length)] : obj;
}

function showMessage(text, timeout, priority) {
  if (!text || (sessionStorage.getItem("mytext") && sessionStorage.getItem("mytext") > priority)) return;
  text = randomSelection(text);
  sessionStorage.setItem("mytext", priority);
  alertText(text)
  setTimeout(() => {
    sessionStorage.removeItem("mytext");
  }, timeout);
}

并添加对此函数的调用

function createDialogElement(root) {
// ......

  if (config.dialog.hitokoto)
    showHitokotoLoop()
  else //从这里开始增加
    setInterval(() => {
      showMessage(randomSelection(config.dialog.text), 4000, 9);
  }, 10000)//增加了这一行
}

//......
module.exports = {
  createDialogElement, displayDialog, hiddenDialog, alertText, showHitokotoLoop, showMessage, randomSelection
}

webpack打包
3.1 在live2d-widget下安装webpack包： npm install --save-dev webpack@3.10.0
注： webpack版本很重要，参考.\live2d-widget\package.json

3.2 命令行输入./node_modules/.bin/webpack

到这里就结束了~~

过程

关于waifu-tips.js · Issue #137 · EYHN/hexo-helper-live2d (github.com)这个issue中并没有提及如何自定义文本的问题，于是就先来读一读源码

有关对话框的源代码在[Blogroot]\node_modules\live2d-widget\src\dialog\index.js下

_config.yml里的设置经过一系列传参到index.js中，变成了config对象

当你按下述设置时，

1
2
3

dialog:
  enable: true
  hitokoto: true

传到index.js中，使得config.dialog.enable和config.dialog.hitokoto都变为了true

因此

function createDialogElement(root) {
// ......

  if (config.dialog.hitokoto) showHitokotoLoop()
}

就调用了showHitokotoLoop()函数，因此我们首先要做的是将hitokoto: true改为false，由于默认值就是false（见.\live2d-widget\src\index.js注释和.\live2d-widget\src\config\defaultConfig.js的默认设置），因此删掉这句话就可以了

我们知道函数showHitokotoLoop()调用了alertText(text)函数，将data.hotokoto当作text参数传入

因此如果要自定义文本，只需要将我们的文本作为text传入即可

于是开始魔改（x），见上一小节

参考了live2d-widget/waifu-tips.js at master · stevenjoezhang/live2d-widget · GitHub

事实上可以看看butterfly主题中对subtitle的处理，还可以增加调用其他api的方法，这里就不加了。

修改为自己想要的live2d图像

选择想要的live2d形象

在完成上面的步骤之后，我们知道存放模型文件的地方就是你博客根目录下面的node_modules中，例如上面的live2d-widget-model-z16的位置就是[blog根目录]/node_modules/live2d-widget-model-z16，现在我们在Eikanya/Live2d-model: Live2d model collection (github.com)找想要配置的角色，找到后下载即可。

然后我们观察到live2d-widget-model-z16中有两个东西，分别是assets文件夹和package.json文件，打开assets文件我们注意一下里面的目录结构，然后在我们自己下载的模型文件中找到相似的目录结构的文件夹。

之后将具有相似结构的文件目录改名为assets。另外再新建一个package.json文件，这里面的内容直接将原来的复制一下就行，里面的名字信息改为你自己的模型名字。最后将assets和package.json合并为一个文件夹（名称为live2d-widget-model-模型名字）放入node_modules下面。最后修改根目录下面的_config.yml中使用的模型地址为live2d-widget-model-模型名字。