给你的hexo添加live2D看板娘

2年前 (2022) 程序员胖胖胖虎阿

231 0 0

给你的hexo添加live2D看板娘

live2D

《Live2D》是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像，对于以动画风格为主的冒险游戏来说非常有用

live2d官网，可以考虑自己制作自己喜欢的

安装依赖

npm install --save hexo-helper-live2d

这个时候是没有模型文件的，所以下一步是下载模型文件

安装模型

去下载一个自己喜欢的模型，将其放入node_modules目录下，或者直接用npm

npm install live2d-widget-model-z16

然后在_config.yml文件里添加：

live2d:
  enable: true
  # 推荐使用 jsdelivr 的 CDN 来加载
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    # 推荐使用 CDN 来加载模型
    use: live2d-widget-model-z16
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7
  dialog:
  #   # 是否开启对话框
     enable: true
  #   # 是否使用一言
     hitokoto: true

也可以用CDN

### 推荐使用 jsdelivr 的 CDN 来加载
  scriptFrom: jsdelivr
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    # 推荐使用 CDN 来加载模型
    use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json

最后运行网站就可以了

使用stevenjoezhang大神开发的加强版live2d

原生hexo似乎只有模型，没有其他功能，stevenjoezhang
大神开发的live2d我们可以放入hexo（上面安装的东西都可以不要）

下载

下载 stevenjoezhang的项目，解压到本地博客目录的 themes/next/source 下，修改文件夹名为 live2d-widget（部署时记得把li ve2d-widget目录的.git删了），修改项目中的 autoload.js 文件，如下：

// const live2d_path = "https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
const live2d_path = "/live2d-widget/";

如果你的hexo加了URL前缀，就将前缀加入live2d_path

修改API

autoload.js下的第34行是填写了live2d模型的API，如果你在国内可能jsdelivr.netCDN不仅不能加速，还会减速，我们把他注释掉，然后使用fghrsh的API接口：live2d.fghrsh.net。或者你拥有自己的服务器，也可以自己搭建live2d API项目。

initWidget({
   waifuPath: live2d_path + "waifu-tips.json",
  apiPath: "https://live2d.fghrsh.net/api/",
  // cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/"
});

引入

每个主题引入不一样，具体请查询自己的主题文档，这里拿next举例

在/themes/next/layout/_layout.swig中,新增如下内容
```
<script src="/live2d-widget/autoload.js"></script>
```

引入jQuery和font-awesome。你的主题如果默认引入了，那请不要重复引入。2020年1月1日起，该项目不再依赖于 jQuery。

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

配置文件添加一下内容
```
live2d:
  enable: true
```
想修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。