Hexo（sakura）添加live2d看板动画（可对话，换装互动）

一、live2d简介

Live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像，对于以动画风格为主的冒险游戏来说非常有用，缺点是Live 2D人物无法大幅度转身，开发商正设法让该技术可显示360度图像。

示例：原博大大官网
根据鼠标热键进行互动

二、使用教程

hexo-helper-live2d中文文档

1. 下载（博客主目录，git bash here）

   npm install --save hexo-helper-live2d
   

2. 下载模型
   大模型：https://github.com/summerscar/live2dDemo
   小模型：https://github.com/EYHN/hexo-helper-live2d

3. 在主目录下新建目录live2d_models/,将需要的模型复制到此处
   

4. 请向主目录的 _config.yml 文件末尾粘贴：

   live2d: ##自定义看板娘动画
     enable: true
     scriptFrom: local ##主目录
     pluginRootPath: live2d_models/ ##模型目录
     pluginJsPath: lib/
     pluginModelPath: assets/
     tagMode: false
     debug: false
     model:
       use: live2d-widget-model-koharu ##对应的模型名称
     display:
       position: left ##居右
       width: 80 ##宽度
       height: 120 ##高度
     mobile:
       show: true ##移动端是否显示
     react:
       opacity: 0.7
   

5. 发布hexo
   
   ok！简单版的看板娘弄好了，接下来是加强版：

   换装互动：https://github.com/stevenjoezhang/live2d-widget

三、加强版看板娘

1. 卸载live2d

   npm uninstall hexo-helper-live2d
   

2. 下载大神优化版live2d-widget；
   其次， 在主目录\themes\sakura\source目录下新建目录live2d-widget；
   最后，将下载内容解压到该目录下。
   

3. 修改autoload.js文件，将大神路径改为绝对路径
   说明：这个绝对路径是编译后 根目录 位置在themes/sakura/source

   // 注意：live2d_path 参数应使用绝对路径
   //const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
   const live2d_path = "/live2d-widget/";
   

4. 修改\MyWeb\themes\sakura\layout\_partial目录下的head.ejs

     <!--自定义看板娘-->
     <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
     <script src="/live2d-widget/autoload.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
   

   next主题需要修改两处，可参考这里。

5. 在\MyWeb\_config.yml文末添加

   live2d: ##自定义看板娘动画
     enable: true
   

   运行效果：
   

6. 想修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。
   其实看板娘可以侧边隐藏，对样本的修改影响也不大。