养一只博客宠物

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

宠物一:浮动小人

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

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

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

宠物二:Live2D 猫咪

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

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

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

引用脚本

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

<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

深入修改

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

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

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

自建 API

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

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

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

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

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

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

附:Live2D API 接口用法

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

Argon 主题下 Live2D 工具栏拍照按钮无法下载图片解决办法

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

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

Live2D 宠物功能修改

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

参考资料

  1. 给WordPress网站加一个博客宠物,漂浮的小人,增加用户粘性,提高用户体验
小提示:您还可以点击下方 [ 标签 ] 阅读相关文章。您可以通过 RSS 订阅本站文章更新,订阅地址:https://crowya.com/feed

评论

  1. Windows Edge
    广西 电信/数据上网公共出口
    4 秒前
    2025-5-29 11:33:26

    Your article helped me a lot, is there any more related content? Thanks!

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇