博客美化：live2d看板娘使用指南

次文章为一年前发布的live2d使用教程，如果想使用支持全部模型的版本，请跳转至博客美化：live2d看板娘使用指南2.0

　　想不想给你的博客也加上左下角这样的看板娘呢，今天就来教大家如何在博客加上可爱的看板娘。
如果你怕麻烦，且只是玩一玩，没想过看板娘一直放在网页中，请参见懒癌小白篇。
如果你希望稍微配置一下看板娘并获取看板娘的所有文件，请参见勤快小白篇。
如果你是大佬，有时间和精力进行二次开发，并希望脚本兼容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@main/loads.js"></script>
  • 没错，真的只有两行，用的是我的Github上的js文件，当然，不排除在某一天消失的可能，所以如果有时间和精力强烈建议你看下面的教程

勤快小白篇

  • 如果你并不会使用魔法上网，这里推荐一款应用Watt Toolkit，微软的应用商店就能搜到，当然，这个软件并不能实现魔法上网，但它能完美解决普通网络访问Github慢，访问不了的问题，还能用来加速steam，最重要的是还是免费的，这种好东西谁能不心动呢。
  • 注册一个Github账号
  • 进入链接https://github.com/lrplrplrp/bkyl2d
  • 点击右上的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保存修改
  • 保存修改
  • 至此如果修改的没问题，已经可以使用下面的链接来使用看板娘了，但此时的配置还不完善，如果你希望显示看板娘进入主页的提示，不要急着尝试，请继续往下看
<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@main/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加上下面的文件引入尝试下有没有问题吧，如果你不幸哪一步配置错了，又希望先放个看板娘在上面，可以用懒癌小白篇中我的文件引入，并修改好自己的文件，第二天再换回自己的文件引入
<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@main/loads.js"></script>
  • 2023-11-06日更新：原来用的CDN加速服务厂商应该是跑路了，导致模型加载不出来，只好又换了个，把原来地址中的master换成main就可以用了

大佬篇

posted @ 2022-11-17 11:07  lrplrplrp  阅读(1951)  评论(2)  编辑  收藏  举报