给你的hexo添加live2D看板娘
live2D
《Live2D》是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像,对于以动画风格为主的冒险游戏来说非常有用
live2d官网,可以考虑自己制作自己喜欢的
安装依赖
这个时候是没有模型文件的,所以下一步是下载模型文件
安装模型
去下载一个自己喜欢的模型,将其放入node_modules目录下,或者直接用npm
然后在_config.yml文件里添加:
也可以用CDN
最后运行网站就可以了
使用stevenjoezhang大神开发的加强版live2d
原生hexo似乎只有模型,没有其他功能,stevenjoezhang
大神开发的live2d我们可以放入hexo(上面安装的东西都可以不要)
下载
下载 stevenjoezhang的项目,解压到本地博客目录的 themes/next/source
下,修改文件夹名为 live2d-widget
(部署时记得把li ve2d-widget目录的.git删了),修改项目中的 autoload.js
文件,如下:
如果你的hexo加了URL前缀,就将前缀加入live2d_path
修改API
autoload.js
下的第34行是填写了live2d模型的API,如果你在国内可能jsdelivr.net
CDN不仅不能加速,还会减速,我们把他注释掉,然后使用fghrsh的API接口:live2d.fghrsh.net
。或者你拥有自己的服务器,也可以自己搭建live2d API项目。
引入
每个主题引入不一样,具体请查询自己的主题文档,这里拿next举例
- 在
/themes/next/layout/_layout.swig
中,新增如下内容
- 引入jQuery和font-awesome。你的主题如果默认引入了,那请不要重复引入。2020年1月1日起,该项目不再依赖于 jQuery。
- 配置文件添加一下内容
- 想修改看板娘大小、位置、格式、文本内容等,可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版