关于hexo:给你的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 举例

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。