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举例

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

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

  2. 引入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">

  3. 配置文件增加一下内容

    live2d:  enable: true
  4. 想批改看板娘大小、地位、格局、文本内容等，可查看并批改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。