沙雕看板娘

2019年9月4日 1条评论 2.3k次阅读 0人点赞博主

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="page_end_html">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
  <script type="text/javascript">
      L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
            "scale": 1
        },
        "display": {
            "position": "right",
            "width": 150,
            "height": 300,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
  </script>
</div>
</body>
</html>

初始化的jsonPath为： https://unpkg.com/2D模型全名称@1.0.5/assets/模型.model.json

例如：https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json

也可通过使用浏览器访问 https://unpkg.com/2D模型全名称@1.0.5/ 来查找对应的模型json地址，如https://unpkg.com/live2d-widget-model-chitose@1.0.5

2D模型全名称：

https://github.com/xiazeyu/live2d-widget-models/tree/master/packages

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

例如：
https://unpkg.com/browse/live2d-widget-model-epsilon2_1@1.0.5/

--------------------------------------------------------------------------------------------------------

官网地址配置：https://www.npmjs.com/package/hexo-helper-live2d

按如下步骤执行

1️⃣ 首先检查博客主目录下面的 package.json里是否有
"hexo-helper-live2d": "^3.0.3",依赖，有的话可以先卸载
使用命令：npm uninstall hexo-helper-live2d
之后再安装：npm install --save hexo-helper-live2d
注意：命令都是在你的博客主目录执行

我的博客目录结构：d:/github/blog
安装完成之后在package.json会看到安装的model

package.json依赖
此时再去 node_moduels目录下，可以看到有如下文件夹，这些都是动画主配置

node_modules目录
2️⃣下载各种动画model：
地址：https://github.com/xiazeyu/live2d-widget-models.git

3️⃣下载好之后将packages里的所有动画模板拷贝到博客的node_modules目录里

packages目录

4️⃣配置博客站点配置文件，_config.yml

live2d:
  enable: true
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-epsilon2_1  #模板目录，在node_modules里
  display:
    position: right
    width: 150 
    height: 300
  mobile:
    show: false  #是否在手机进行显示

5️⃣开始部署
当使用hexo clean或者 hexo g命令的时候，这时候就可以看到如下日志了

构建日志
INFO HEXO-HELPER-LIVE2D: Loaded model from npm-module(1), live2d-widget-model-epsilon2_1@1.0.5 from 'D:\github\blog\node_modules\live2d-widget-model-epsilon2_1\assets'
说明已经加载到了配置的动画模板，到此就完成了。