个人网站hexo - shoka主题加入live2D

简单设置

在 themes\shoka\layout\_partials 目录下创建 live2d.njk 文件，放入以下代码：

<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
<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">

然后再同目录下的 layout.njk 下在 </body> 前加入

{{ partial('_partials/live2d.njk') }}

参考：GitHub - stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform​​​​​​

复杂自定义设置

方式 1：基于简单设置上的自定义

参考: hexo如何加入自定义live2d吉祥物 | 练习没满两年半的狒狒

本地文件

在博客源文件（即 source）目录下，执行前述的 git clone 命令。重新部署博客时，相关文件就会自动上传到对应的路径下。为了避免这些文件被 Hexo 插件错误地修改，可能需要设置 skip_render 。

git clone https://github.com/stevenjoezhang/live2d-widget.git

然后在 _config.yml 中加入 git clone 后文件路径，防止被二次修改：

skip_render: live2d-widget/*

修改之前简单设置中 autoload.js 中的常量 live2d_path 为 live2d-widget 这一目录的路径：

	
const live2d_path = "/live2d-widget/";

CDN

直接修改之前简单设置中 autoload.js 中的常量 live2d_path 为 live2d-widget 这一目录 CDN 的 URL。

方式 2：插件安装

上面简单配置添加过的话，注意删除 layout.njk 添加的语句，避免重复冲突。

参考：Hexo-Live2d安装教程(自定义Live2d) | Lete乐特 's Blog 和 https://github.com/EYHN/hexo-helper-live2d

模型适配较少，但因为 hexo 有对应插件整合设置比较方便，执行以下命令：

npm install --save hexo-helper-live2d

然后再 _config.yml 中添加：

live2d:
  enable: true # 是否开启 live2d
  scriptFrom: local ## 脚本从本地引入
  pluginRootPath: live2dw/ # 模型根目录 (指 hexo g 后生成 public\live2dw 文件名)
  pluginJsPath: lib/ # 依赖 js 的文件夹名 (public\live2dw\lib)
  pluginModelPath: assets/ # 模型存放目录 (public\live2dw\assets)
  tagMode: false # 标记模式 (未知) 
  log: false # 日志
  model: # 模型
    use: live2d-widget-model-wanko # 使用的模型名称
  display: # 显示
    position: right # 显示在右边 (left 显示在左边)
    width: 150 # 宽度
    height: 300 # 高度
  mobile:
    show: true # 手机端是否显示
  react:
    opacity: 0.7 # 透明度