想不想给你的博客也加上左下角这样的看板娘呢,今天就来教大家如何在博客加上可爱的看板娘。
如果你怕麻烦,且只是玩一玩,没想过看板娘一直放在网页中,请参见懒癌小白篇。
如果你希望稍微配置一下看板娘并获取看板娘的所有文件,请参见勤快小白篇。
如果你是大佬,有时间和精力进行二次开发,并希望脚本兼容3.0版本的模型,请参见大佬篇
懒癌小白篇
- 如果你真的嫌麻烦,最省事的办法就是直接在博客园的页脚HTML中加上以下js脚本
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script src="https://fastly.jsdelivr.net/gh/lrplrplrp/bkyl2d@master/loads.js"></script>
- 没错,真的只有两行,用的是我的Github上的js文件,当然,不排除在某一天消失的可能,所以如果有时间和精力强烈建议你看下面的教程
勤快小白篇
- 如果你并不会使用魔法上网,这里推荐一款应用Watt Toolkit,微软的应用商店就能搜到,当然,这个软件并不能实现魔法上网,但它能完美解决普通网络访问Github慢,访问不了的问题,还能用来加速steam,最重要的是还是免费的,这种好东西谁能不心动呢。
- 注册一个Github账号
- 进入链接https://github.com/lrplrplrp/bkyl2d
- 点击右上的Fork按钮
- 不做任何修改,点下面的Create fork
- 进入链接https://github.com/lrplrplrp/live2d_api
- 点击右上的Fork按钮
- 不做任何修改,点下面的Create fork
- 点击头像回到个人主页
- 点击bkyl2d
- 点击load.js文件
- 点击笔图标修改文件
- 注意:在修改完成前请不要尝试访问被修改的链接,这些是Github的CDN加速地址,Github做的修改往往需要一天甚至更久才会被同步到CDN,只有第一次访问是立即同步,所以在访问链接或使用自己配置的看板娘前,请一定要仔细检查修改是否正确
- 第三行链接修改为https://fastly.jsdelivr.net/gh/你的Github名称/bkyl2d@master/
例:如果我的Github名称是awsl,就修改为https://fastly.jsdelivr.net/gh/awsl/bkyl2d@master/ - 每次修改不要忘记点最下面的Commit changes保存修改
- 第41行修改为https://cdn.staticaly.com/gh/你的Github名称/live2d_api/master/
- 保存修改
- 至此如果修改的没问题,已经可以使用下面的链接来使用看板娘了,但此时的配置还不完善,如果你希望显示看板娘进入主页的提示,不要急着尝试,请继续往下看
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script src="https://fastly.jsdelivr.net/gh/你的Github名称/bkyl2d@master/loads.js"></script>
- 返回bkyl2d的文件列表,点击waifu-tips.js
- 点击笔图标修改文件
- 第114行中的两个lrplrplrp修改为你的博客园用户名,注意是博客园用户名
- 保存修改
- 另外52行是空闲时显示的消息
- 92行是关闭看板娘显示的消息
- 116-123行是不同时间段直接进入主页显示的消息
- 127-131行是不同搜索引擎跳转到主页显示的消息
- 这些消息都可以添加,并以随机其中一条显示
- 173-174行是首次进入展示的模型的模型id和材质id,模型id和材质id可以在我的主页切换到想放在主页的模型后按F12切换到控制台输入localStorage.modelId和localStorage.modelTexturesId获取
- 顺序切换模型功能是我加的,原版的CDN加载模型的方式是每次加载某个id的模型都会随机其中的一个材质加载,如果希望改回原版,请取消237-240行的注释,并给243-250行加上注释
- 36-37行是我自己加的根据自己的主题改变live2d对话框字体颜色的功能,否则切换主题会出现看不见文字的情况,大家可以根据自己主题的情况修改。
- 如果你希望自定义看板娘在鼠标与网页元素交互时弹出对话框,需要修改文件列表的waifu-tips.json文件,并且可能需要懂一点css选择器的知识。
- 修改看板娘的位置可以修改waifu.css文件
- 好了,基本配置到这就结束了在博客园的页脚html加上下面的文件引入尝试下有没有问题吧,如果你不幸哪一步配置错了,又希望先放个看板娘在上面,可以用懒癌小白篇中我的文件引入,并修改好自己的文件,第二天再换回自己的文件引入
大佬篇
- 如果你是希望使用3.0版本模型的大佬,可以参考这个Github项目https://github.com/Konata09/Live2dOnWeb
- 这是某个大佬写的兼容3.0模型的live2d的版本,前后端并不分离、模型较少,且做的并不完善,大佬们可以参考此项目进行二次开发
- 再厉害一点的大佬可以参考live2d官方的教程从底层开始做起
- live2d官方链接https://www.live2d.com/zh-CHS