摘要

通过hexo-helper-live2d插件给自己的博客添加一个小人。

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

大神水平：功能齐全。能说话、能换装、能玩游戏、能拍照、还能自定义。

Hexo博客添加Live2D小人

通过hexo-helper-live2d插件给自己的博客添加一个小人，最后的成果图如下

小白入门

首先安装插件

1	npm install --save hexo-helper-live2d

如果你的npm出现依赖问题 vulnerabilities 错误，那么可以通过降低npm版本，但是如果你不想降低又无法解决依赖问题，那么建议你关闭audit报错，当个鸵鸟，眼不见心不烦。

（本人就选择了鸵鸟对策，把头埋进沙地里面，什么也看不见😂）

选择你喜欢的模型。这里是模型仓库，这里是各个模型的展示

我选择的是白猫模型，也就是live2d-widget-model-tororo

可供选择模型

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

1	npm install live2d-widget-model-<你喜欢的模型名字>

复制你喜欢的模型名字：

Epsilon2.1

Gantzert_Felixander

haru

miku

ni-j

nico

nietzche

nipsilon

nito

shizuku

tsumiki

wanko

z16

hibiki

koharu

haruto

Unitychan

tororo

hijiki

安装好模型后，在 hexo 的配置文件_config.yml中添加如下配置，详细配置可以参考文档：

live2d:
 enable: true
 pluginRootPath: live2dw/ # Root path of plugin to be on the site (Relative)
 pluginJsPath: lib/ # JavaScript path related to plugin's root (Relative)
 pluginModelPath: assets/ # Relative model path related to plugin's root (Relative)
 scriptFrom: local # Default
 tagMode: false # Whether only to replace live2d tag instead of inject to all pages
 log: false # Whether to show logs in console
 model:
  use: live2d-widget-model-tororo # npm-module package name
  scale: 1
  hHeadPos: 0.5
  vHeadPos: 0.618
 display:
  superSample: 2
  width: 150
  height: 300
  position: left
  hOffset: 150
  vOffset: -10
 mobile:
  show: true
  scale: 0.05
 react:
  opacityDefault: 0.7
  opacityOnHover: 0.2

配置完成后hexo clean & hexo g &hexo s -p 5555然后hexo d就可以在网站上看到你的看板娘了

问题解决

position: left 不生效

https://github.com/EYHN/hexo-helper-live2d/issues/100

大神水平

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

配置

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

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

注释掉，将下面的

1	const live2d_path = "/live2d-widget/"

解除注释

在/themes/next/layout/_layout.swig中,新增如下内容

在文件位置：~/theme/next/layout/_layout.swig 的</body>标签之前

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

在/themes/next/layout/_layout.swig中,在 <head> 之后中加入

1 2	<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">