Hexo美化|站宠？看板娘？live2d配置（附魔改插件和新模型）

效果⁍

见本站右下角

实现目标⁍

采用hexo-helper-live2d插件实现，参考 hexo live2d插件 2.0 ! | 幻想帖 (huaji8.top)
配置添加对话/文字功能
修改为自己想要的live2d形象（Eikanya/Live2d-model: Live2d model collection (github.com)，梦象 (paul.ren)）
和音乐播放器合在一起？（暂不考虑）

`hexo-helper-live2d`插件安装与配置⁍

EYHN/hexo-helper-live2d: Add the Sseexxyyy live2d to your hexo! (github.com)

安装插件⁍

在站点根目录下打开终端，输入以下命令

bash

1	`npm install --save hexo-helper-live2d`

选择并安装模型⁍

bash

1	`npm install --save live2d-widget-model-wanko`

配置⁍

打开站点配置文件_config.yml，添加live2d项，如下

yml

# live2d
# https://github.com/EYHN/hexo-helper-live2d
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标签而非插入到所有页面中，具体见项目github描述
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-wanko # live2d模型的名字
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 200
    height: 400
    position: left # 左侧还是右侧
    hOffset: 20
    vOffset: 0 # 距底部距离
  mobile:
    show: false # 手机端是否可见
    scale: 0.5
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

然后hexo cl&&hexo g&&hexo s就可以在localhost:4000上预览效果啦

添加文字框功能⁍

浮现hitokoto文字⁍

语句接口 | 一言开发者中心 (hitokoto.cn)简而言之就是提供了一个api接口https://v1.hitokoto.cn，可以返回一句话

参考关于waifu-tips.js · Issue #137 · EYHN/hexo-helper-live2d (github.com)

其实再简单不过，就是在_config.yml中添加几行文字：

yml

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

就可以将hitokoto上的一句话显示在你的live2d形象上方

一些蠢事带来的js脚本调试的尝试记录⁍

改完配置之后，设置迟迟没有生效，看了看几个主要的脚本似乎也没什么问题，于是本人初尝了以下js调试。（省略一些绕弯路的步骤）

hexo s之后，打开localhost:4000

打开开发者模式-源代码，（省略一些搜索dial..的步骤），打开了webpack://./src/utils/elementMgr.js文件（也不一定是这个）

设置断点，刷新

鼠标放在config上，同志们。。我打错变量名了。。是dialog不是dialogue

被自己蠢到，但也算尝试了一下调试的基础。。嗯。。

自定义文本⁍

解决方案⁍

修改配置文件_config.yml

yml

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

这里的text变量名随便起，只要跟后面的config.dialog.text对应即可

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

javascript

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);
}

并添加对此函数的调用

javascript

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打包
- 在live2d-widget下安装webpack包： npm install --save-dev webpack@3.10.0
  - webpack版本很重要，参考.\live2d-widget\package.json
- 命令行输入./node_modules/.bin/webpack
  
  讲道理可以照package.json的提示输入，npm run build:prod之类的命令，但会报错（应该改改路径就可以了？）
成功啦

过程：阅读源码并修改⁍

关于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对象

当你按下述设置时，

yml

1
2
3

dialog:
  enable: true
  hitokoto: true

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

因此

javascript

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的方法，这里就不加了。

原项目archived了，所以大家看着改改就好，重要的是方法

修改为自己想要的live2d图像⁍

选择想要的live2d形象⁍

这里在Eikanya/Live2d-model: Live2d model collection (github.com)中进行选择

众所周知，邦邦有邦邦人制作的神器 Live2D浏览器 | Bestdori! BanG Dream 少女乐团派对的最佳资源库，可以查看相应活动的live2d形象

方法一：可以在上面的github库中的邦邦文件夹的1~35分别代表的各个角色，比如户川香澄就是1，[001_live_event_102_ssr](https://github.com/Eikanya/Live2d-model/tree/master/BanG Dream!/asneeded/live2d/chara/001/001_live_event_102_ssr)就是第102次活动的ssr卡

方法二：该github库到炮姐联动之后就没有更新了，但是我们有bestdori!在 Live2D浏览器中点击左上角可以直接获得卡面路径

然后去数据包浏览器里找到相应路径就可以下载了，是不是很简单，快去试试吧！