首页 > 分享 > 养一只博客宠物

养一只博客宠物

萌宠菠菠乐园
2024-09-30 00:42

我尝试了两种方式，普通平面图像与 Live2D 半立体图像。

主题页脚 (footer.php) 添加以下代码。另外还需要一个 js 文件与图片。

JS 脚本与图片下载地址: https://pan.baidu.com/s/1l0cUk7hxDwm_gRPQq95avQ 提取码: crow

注意：代码和脚本中的网址链接都要改为自己的。

前面讲的方式使用的是一张固定不变的 png 图片，而 Live2D 的模型更加精致，可实现头部旋转跟随鼠标等近似三维效果。目前各大网站上流传的 Live2D 看板娘似乎都是同一个版本。我来捋一下：

Jad：最初作者 FGHRSH：在前者的基础上增加 API 接口 stevenjoezhang：在前者的基础上魔改（新手推荐）xb2016：制作了 WordPress 插件版本（只有两个模型）summerscar：收集了很多模型

新手入门推荐先从最简单的开始，那就是直接引用别人的脚本。

如果你的主题里自带 Font Awesome 图标库，比如 Argon 主题，那么你只需要在页头脚本或页尾脚本里添加下面一句话。

如果没有 Font Awesome，才需要添加下面这句话。当然如果动手能力强的话你也可以改图标的 class。

但是引用别人的脚本的不便之处在于无法自由配置。如果想要继续深入修改，需要把文件放到自己的服务器上，或者使用自己的 CDN。详见 stevenjoezhang 的 GitHub。

但是当我把文件下载到自己的服务器上后发现这些文件只能修改对话框文字内容以及按钮逻辑等，不能修改模型。它的模型文件依然引用的是外部 API 地址：https://live2d.fghrsh.net/api/

因此想要增加自己喜欢的模型只能自建 API 。

从 FGHRSH 的 GitHub 下载源码并放到自己的服务器。修改 autoload.js 中的 apiPath 为自己服务器的存放目录。

完成这一系列准备工作之后就可以调用自己喜欢的模型了。模型可在 summerscar 的 GitHub 下载。

下载完模型后，挑几个自己喜欢的，把它们放到一个文件夹里，名字随意取，比如 prefer，然后把 prefer 文件夹上传到服务器 API 目录的 model 文件夹下。

需要特别注意的是每个模型文件夹的 xxxx.model.json 要重命名为 index.json，其他什么都不用改。这一步可以在本地完成后再上传，也可以上传后在服务器完成。

最后，修改 model_list.json 文件，把新的模型索引进去。具体方式可参照文件中原有写法。

大功告成，清除一下缓存应该就能见到效果了。

/add/ 检测添加皮肤并更新缓存列表/get/?id=1-23 获取分组 1 的第 23 号皮肤/rand/?id=1 根据上一分组随机切换/switch/?id=1 根据上一分组顺序切换/rand_textures/?id=1-23 根据上一皮肤随机切换同分组其他皮肤/switch_textures/?id=1-23 根据上一皮肤顺序切换同分组其他皮肤

作者已修复此 bug，可跳过。

删除或注释掉 argontheme.js 文件下 1125 行左右的函数 removeUrlHash(url)。

这个单独开一篇文章写。包括去掉多余按钮、右键快捷通道、音乐播放器等功能。

给 WordPress 网站加一个博客宠物，漂浮的小人，增加用户粘性，提高用户体验