养一只博客宠物

我尝试了两种方式,普通平面图像与 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. Shine
    Windows Chrome
    北京市海淀区 联通
    1 天前
    2024-11-22 16:59:47

    自建API都配置好了,模型显示不出来

  2. www
    Windows Edge
    陕西省 电信
    5 月前
    2024-7-09 11:36:16

    nihao

  3. Bensz
    Windows Chrome
    广东省深圳市 电信
    已编辑
    3 年前
    2022-4-14 15:26:43

    对了大佬,按您的教程猫和隐藏的音乐播放器都已经搭建好了,但是我点音乐播放器,不知道为什么没有反应?
    我的博客地址是:https://blognas.hwb0307.com
    然后看板娘是托管在github上的:https://github.com/huangwb8/live2d_bensz
    能帮忙看看是什么问题吗?谢谢哈

  4. Bensz
    Windows Chrome
    广东省深圳市 电信
    3 年前
    2022-4-12 18:10:25

    大佬可以在github上传一下这个猫嘛,好想要(~ ̄▽ ̄)~

    • 博主
      Bensz
      Windows Edge
      上海市静安区 电信
      3 年前
      2022-4-13 15:55:01

      白猫的模型叫tororo,其实在summerscar的GitHub也有的,我单独提取了一份传到了阿里云盘,两边都可以下。

      • Bensz
        鸦鸦
        Windows Chrome
        广东省深圳市 电信
        3 年前
        2022-4-13 15:58:04

        谢谢大佬的回复~我已经在养黑猫,目前托管在github上~在看你的文章学着配置它说话、按扭啥的,但是对编程不太了解,有点吃力就是了~可否加qq,有什么不懂就咨询你一下呀?我qq是654751191,谢谢(~ ̄▽ ̄)~

        • 博主
          Bensz
          Windows Edge
          上海市静安区 电信
          3 年前
          2022-4-16 10:55:01

          加你了,我又想起来那个模型下载后文件名好像要改的,不知道是不是这个原因~

  5. Bensz
    Windows Chrome
    广东省深圳市 电信
    3 年前
    2022-4-12 11:18:08

    找了一下,看到了fghrsh的博客地址,https://www.fghrsh.net/post/123.html。我先试试看

  6. Bensz
    Windows Chrome
    广东省深圳市 电信
    3 年前
    2022-4-12 11:11:17

    另外,这个猫猫也好可爱,这个模型叫什么名字

  7. Bensz
    Windows Chrome
    广东省深圳市 电信
    3 年前
    2022-4-12 11:04:48

    大佬,我想问一下,这个autoload.js文件在哪啊(~ ̄▽ ̄)~

  8. 小小黑
    Windows Chrome
    山东省潍坊市 移动
    3 年前
    2022-3-23 23:04:23

    参考资料“给 WordPress 网站加一个博客宠物,漂浮的小人,增加用户粘性,提高用户体验”会跳转到一个小说阅读页面。。。

    发送评论 编辑评论

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