简单设置

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

1
2
3

<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') }}

参考：https://github.com/stevenjoezhang/live2d-widget

复杂自定义设置

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

参考: https://pyherman.github.io/2019/08/10/hexo%E5%A6%82%E4%BD%95%E5%8A%A0%E5%85%A5%E8%87%AA%E5%AE%9A%E4%B9%89live2d%E5%90%89%E7%A5%A5%E7%89%A9/

本地文件

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

1

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

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

1

skip_render: live2d-widget/*

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

1

const live2d_path = "/live2d-widget/";

CDN

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

方式2：插件安装

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

参考：https://blog.imlete.cn/article/Live2d-Config.html 和 https://github.com/EYHN/hexo-helper-live2d

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

1

npm install --save hexo-helper-live2d

然后再_config.yml中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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 # 透明度