博客jekyll添加模版动画

1. 简介

感觉这个动画满萌的添加个动画

由于这个是基于Hexo的方式开发的,所以引用到jekyll里面还是费点劲的

2. 步骤

此步骤可以忽略,纯粹是为了获取生成的静态数据

可以直接到3.7之后获取

1.安装nodejs(略)

2.安装Hexo

执行命令

::安装脚手架
npm install hexo-cli -g
::初始化博客
hexo init blog
::进入博客
cd blog
::为博客安装依赖
npm install
::启动博客
hexo server

效果如图

3.安装Live2D

接着上面的命令行执行
```
npm install --save hexo-helper-live2d
```

将下面的代码添加到Hexo博客的配置文件_config.xml中

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

但这一步只下载了个空壳，不包含看板娘的。所以还需要下载看板娘资源。详见live2d-widget-models。
```
 git clone https://github.com/xiazeyu/live2d-widget-models.git
```
找到项目里的live2d-widget-model-wanko文件夹，把里面assets里面的内容（不含assets文件夹），拷贝到Hexo的blog文件夹下新建一个live2d_models\wanko文件夹中。
注意_config.xml中的model下面的use和live2d_models下面的文件夹相对应。
重新运行
```
hexo server
```
效果图:
编译静态文件
```
hexo deploy
```

4.配置jekyll的动态图

打开public下的index.html文件,获取此行,放入footer中

可以适当修改

<!-- 动漫图 -->
    <script src="../..//assets/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script>
    <script>
        setTimeout(() => {
            L2Dwidget.init({
                "pluginRootPath": "assets/live2dw/",
                "pluginJsPath": "lib/",
                "pluginModelPath": "assets/",
                "tagMode": false,
                "debug": false,
                "model": {"jsonPath": "/assets/live2dw/assets/wanko.model.json"},
                "display": {"position": "right", "width": 150, "height": 300},
                "mobile": {"show": true},
                "log": false
            })
        }, 1000)
    </script>