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

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

前言

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

这次就是闲的慌，打算把我博客里面的看板娘（那个可调戏的2233），扒到我的桌面上，作为互动。因为我的桌面已经是可以互动了，只是不能鼠标互动233 (不要注意我的右下角的看板娘，这是另一个，没达到我想要的效果，后面删掉了）当我查看这个壁纸的源代码发现，他是由HTML制作的，所以我就放弃了用C++制作一个看板娘，直接转为用网页代码制作（而且也方便很多，因为博客也是网站）

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

1
2
3

<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小白来说

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

过了许久，我决定卷土重来，全部东西删掉，重新理清楚思路，首先，我还是按照我最上面的三条代码，这次我改上面三条代码，从三条代码的源码开始改起看来用最简单的办法还是可以处理的接下来就要从云端改成本地运行库，让这些从本地运行

删除这段代码重新整理成

1	<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捣鼓这些有个锤子用… …气死我了然后我就把矛头指向这里