做一个桌面版的看板娘真的不尽人意

筱锋xiao_lfeng

发布于 2022-03-16 17:26:03

1.8K0

发布于 2022-03-16 17:26:03

文章被收录于专栏：凌中的锋雨-博客

这篇文章，我现在回头看2021-02-20我都不知道我在写啥😂 所以有问题还请多包涵

前言

一切的一切只能从一只蝙蝠开始说起。很不幸的事情，我们广东在2020-05-11就准备错峰开学了（而初三或者高三就在2020-04-27号开学）不过这些不是重点，反正开学就开学了，劳资巴不得开学！呆在家里累的一批，出去玩还要带口罩麻烦……

这次就是闲的慌，打算把我博客里面的看板娘（那个可调戏的2233），扒到我的桌面上，作为互动。因为我的桌面已经是可以互动了，只是不能鼠标互动233

(不要注意我的右下角的看板娘，这是另一个，没达到我想要的效果，后面删掉了）当我查看这个壁纸的源代码发现，他是由HTML制作的，所以我就放弃了用C++制作一个看板娘，直接转为用网页代码制作（而且也方便很多，因为博客也是网站）

如果是简简单单加三行源代码就可以实现桌面版的看板娘，但是我不喜欢这样，因为他固定在左下角，我不能作为修改，而且不能移动我不喜欢简易三行代码（添加到标签中间就行了）

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

主要是（博客这个有裸妆/doge 假的/真的假的自己试试就行了）所以喜欢 awa

开始工程

首先吧，特别简单，从moedog下载2233的源代码（尝试过程，实际上我行不通，放弃了） https://moedog.org/946.html 这是从上面三行源代码得出的源文件

我们可以根据这个来找我们需要的东西二千年がたつ… …（GitHub好慢啊，虽然开了梯子会快一些，但是下载时候我懒）

趁时间不注意，我去阿里云开一个api.xiaolfeng.xyz来（其实呢并没有什么用，如果搭建在本地也可以执行，如果直接调用这个连接，你们就可以直接用，不用我下面的麻烦的配置awa（是不是超赞）现在呢已经下载好并且解压了

好了，还是用其他图床吧，我们继续，所需要的文件都在css，js，model里面在model里面就是我们需要的图形文件，也就是让他动起来那些图片利用js和css让他动起来

至于readme.md删了吧，没用了/doge（不过还是读一下比较好，尊重原作者awa）好了，现在对比一下，发现与之前的源文件缺少autoload.js和waifu-tips.json 至于这两个我觉得可能不是特别那个，所以吧我们继续首先我打算测试一下，用创建一个index.html 然后我们进行测试一下，查找下载附带的index.php这里面我觉得会有引用的文件

然后自己创建一个html，按照右边相对应代码引入

按照右边进行输入后，用网页进行打开，发现我并没有找到我的看板娘在哪里，哎呀脑阔疼… … 后来经过一番折腾，发现作者那里写着

呵呵，我一个都没装，于是我就去找这两个代码了233 一番折腾，发现我博客主题里面有直接拿来复制233（我真聪明）然后我就算添加了看来也不太行

那是不是我缺少autoload.js？因为这是支持wordpress博客的插件，所以不能拿来直接引用（哎呀，我太难了）于是我就开始参照原来的2233代码进行测试

对我一个没怎么学习过js的人来说还真有点难（假的，学过，只是学艺不精哈哈哈屮）好了，不皮了然后就是尝试如何进行修改~ 不过我想说一点，我觉得他的waifu-tips.js引用了model文件夹，所以我没有重新引入我怕出问题二千年がたつ… … 我想我放弃了，这个我几乎还原autoload.js几乎没用哈哈哈屮

所以我打算从我的博客里面的2233娘进行参数复制所以开始解读Kratos的主题，看看那些代码与waifu-tips.js、live2d.js、waifu.min.css有关然后我可以找到两个js但是我找不到waifu.min.css所以（多半原作者直接拆开css跟kratos.css进行合并了）很好，不出我所料

接下来就是看作者是如何用主题进行导入的，因为这是主题自带，不是插件所以我可以直接在php里面找到

尽管知道如何查找，但是查找也是个硬伤=w= 毕竟要一个个查找（所以我直接打算打包压缩后进行下载在本地直接进行查找，又快很多而且不会损坏我博客内容）可能就是有点大（文件，而且网速不是特别好，香港主机嘛）尽管我已经这么设置了，但是还是不尽人意

当然，还是没有找到。哎但是我也不会放弃的，多半由于PHP原因（我没学过PHP）哈哈哈屮，是不是很淦。没办法我只学过HTML、js、css，就是没有学PHP（我当初就应该学一下的！）于是我开始百度/Google去找如何制作主题因为制作主题大多数都要引入css和js，只要找到如何引入我觉得我就知道如何导入（虽然我也不知道我为什么要这么搞，可能可以直接制作index.php然后用网页进行输出即可）我去，我脑子可能有点BUG，我用着Vscode这么好的软件怎么没有想到用全局搜索啊啊啊啊啊啊啊啊啊啊啊

等会，我在干嘛？？？我要这个有何用？？？我是做HTML的啊算了，我放弃了，我决定用我服务器创建一个网站用PHP来尝试，如果PHP尝试成功再转换为HTML进行尝试= = 我告诉你我难死了

现象和现实是多么残酷的一件事情啊，事事不如意，多半我还是来HTML吧，对于我个PHP小白来说

过了许久（准确来说自闭了许久）

过了许久，我决定卷土重来，全部东西删掉，重新理清楚思路，首先，我还是按照我最上面的三条代码，这次我改上面三条代码，从三条代码的源码开始改起看来用最简单的办法还是可以处理的

接下来就要从云端改成本地运行库，让这些从本地运行

删除这段代码重新整理成

<script src="/autoload.js"></script>

让他保持在本地运行然后修改autoload.js文件，把里面的js，css替换成博客里面的model模型后来发现改waifu.min.css，waifu-tips.js一切正常而一修改live2d.min.js就发现看板娘不见了，我觉得我已经找到BUG所在了

然后用格式化工具将格式转化成方便观看的格式

接下来就是对比，为什么切换成live2d.js后就打不开然后发现，这两个文件一模一样，没有一个地方不一样，然后是不是min.js和js这两个格式问题，于是我就开始了分别测试然后发现当改成min.js后就可以使用了，你看看这是人做的事情么

目前，我已经修改了waifu-tip.js，live2d.min.js，然后waifu.css是不用修改的，这个只是让他显示的位置和美化用的，并没有什么实际上大意义，所以不修改但是，我的bilibili还是没有变欸，难不成这些皮肤不归这些管理，我nm捣鼓这些有个锤子用… …气死我了然后我就把矛头指向这里