给你的hexo添加live2D看板娘

live2d.gif

live2D

《Live2D》是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像,对于以动画风格为主的冒险游戏来说非常有用

live2d官网,可以考虑自己制作自己喜欢的

安装依赖

npm install --save hexo-helper-live2d

这个时候是没有模型文件的,所以下一步是下载模型文件

安装模型

去下载一个自己喜欢的模型,将其放入node_modules目录下,或者直接用npm

npm install live2d-widget-model-z16

然后在_config.yml文件里添加:

live2d: enable: true # 推荐使用 jsdelivr 的 CDN 来加载 scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false debug: false model: # 推荐使用 CDN 来加载模型 use: live2d-widget-model-z16 display: position: right width: 150 height: 300 mobile: show: true react: opacity: 0.7 dialog: # # 是否开启对话框 enable: true # # 是否使用一言 hitokoto: true

也可以用CDN

### 推荐使用 jsdelivr 的 CDN 来加载 scriptFrom: jsdelivr pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false debug: false model: # 推荐使用 CDN 来加载模型 use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json

最后运行网站就可以了

使用stevenjoezhang大神开发的加强版live2d

原生hexo似乎只有模型,没有其他功能,stevenjoezhang
大神开发的live2d我们可以放入hexo(上面安装的东西都可以不要)

下载

下载 stevenjoezhang的项目,解压到本地博客目录的 themes/next/source 下,修改文件夹名为 live2d-widget(部署时记得把li ve2d-widget目录的.git删了),修改项目中的 autoload.js 文件,如下:

// const live2d_path = "https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/"; const live2d_path = "/live2d-widget/";

如果你的hexo加了URL前缀,就将前缀加入live2d_path

修改API

autoload.js下的第34行是填写了live2d模型的API,如果你在国内可能jsdelivr.netCDN不仅不能加速,还会减速,我们把他注释掉,然后使用fghrsh的API接口:live2d.fghrsh.net。或者你拥有自己的服务器,也可以自己搭建live2d API项目

initWidget({ waifuPath: live2d_path + "waifu-tips.json", apiPath: "https://live2d.fghrsh.net/api/", // cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/" });

引入

每个主题引入不一样,具体请查询自己的主题文档,这里拿next举例

  1. /themes/next/layout/_layout.swig中,新增如下内容
<script src="/live2d-widget/autoload.js"></script>
  1. 引入jQuery和font-awesome。你的主题如果默认引入了,那请不要重复引入。2020年1月1日起,该项目不再依赖于 jQuery。
<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">
  1. 配置文件添加一下内容
live2d: enable: true
  1. 想修改看板娘大小、位置、格式、文本内容等,可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。
posted @   遗失的美好灬  阅读(421)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版
点击右上角即可分享
微信分享提示