简单设置
在 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 # 透明度