将live2d猫咪整合到Hugo主题LoveIt
自建博客,一直想在页面上弄个“人格”,比如“伪春菜”。后来,朋友给我分享了领一只动态卡哇伊的小猫咪到你的网站吧 live2d入门这篇文章。觉得挺合适,一白一黑两只猫模型,刚好LoveIt主题也是黑白。更何况,我还是个铲屎官。
整合live2DModel
思路
看了全球首家大型线上吸猫网站这个示例后,发现其实很简单:
- 引入live2d的js资源
- 设置live2d的配置参数,放入live2d模型的路径
- 调用
L2Dwidget
的init
方法,传入配置参数
整合
- 将live2DModel资源加入版本库(含live2d以及模型)
git submodule add https://gitee.com/tczmh/live2DModel.git static/js/lib/live2DModel
- 修改
layouts/partials/scripts.html
模板,引入l2dwidget.min.js
复制主题内(如themes/LoveIt
)的layouts/partials/scripts.html
,放到layouts/partials/scripts.html
,添加以下代码{{- /* l2dwidget https://gitee.com/tczmh/live2DModel */ -}} {{- $l2dwidget := "" -}} {{- if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.l2dwidget_js -}} {{- $l2dwidget = .Site.Params.cdn.l2dwidget_js -}} {{- else -}} {{- $l2dwidget = printf "<script src=\"%s\"></script>" "js/lib/live2DModel/l2dwidget.min.js" | relURL -}} {{- end -}} {{- $l2dwidget | safeHTML -}}
- 修改
assets/js/blog.js
,加入模型渲染逻辑。注意配合主题风格切换猫的模型
然后在_Blog.l2dwidget = function() { if (window.L2Dwidget) { let lightPath = 'js/lib/live2DModel/tororo/assets/tororo.model.json'; let darkPath = 'js/lib/live2DModel/hijiki/assets/hijiki.model.json'; let config = { model: { jsonPath: '', // xxx.model.json 的路径 }, display: { superSample: 1, // 超采样等级 width: 150, // canvas的宽度 height: 200, // canvas的高度 position: 'left', // 显示位置:左或右 hOffset: 0, // canvas水平偏移 vOffset: 0, // canvas垂直偏移 }, mobile: { show: true, // 是否在移动设备上显示 scale: 1, // 移动设备上的缩放 motion: true, // 移动设备是否开启重力感应 }, react: { opacityDefault: 1, // 默认透明度 opacityOnHover: 1, // 鼠标移上透明度 }, }; this.show = function() { config.model.jsonPath = isDark ? lightPath : darkPath; L2Dwidget.init(config); } $('.theme-switch').on('click', () => { this.show(); }); this.show(); } }
$(document).ready()
回调的函数体最后加入_Blog.l2dwidget();
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战