非Sakura主题如何解决Live2d嘉然看板娘点击隐藏导致图片消失的问题
序言：前几天给自己博客换了个嘉然看板娘，乍一看还是很不错的，简单实用没有bug，但是当我点击右边的隐藏按钮时，发现我的嘉然消失了(我的嘉然！！！😭)。无论怎么刷新网页都不会重新出现，并且我去查看其他大佬的博客，发现他们都没有这种情况，他们的嘉然会变成Q版可爱图片在网页左下角。我的嘉然则必须清理网页缓存才能重新出现😭😭😭😭~~
小伙伴如果没有耐心看完解决此bug的全程，则请直接移步最后的结论部分。
一、如何排查bug？
出现bug后我第一时间思考了原因，是不是我本地部署的插件本身有bug？？或者服务器配置没写对？又或者是其他bug？？
1.1 排查本地部署的插件本身是否有bug？？
我首先找到了叶小兽大佬の博客，并进行了相应的操作，发现大佬的嘉然能够正常的隐藏和复原。
于是我从大佬博客里下载了大佬版本的插件代码。并替换掉了我服务器的插件代码。
结果在刷新网页后我发现bug依旧存在。
1.2 排查是否服务器配置没写对？？
接着我对插件文件夹进行查看，发现live2d文件夹下的avatat.png是我网页无法显示的图片，又在pio.css中发现了其引用代码。
但是奈何博主前端功底薄弱，只好将此代码扔给ChatGPT进行询问。下面是GPT的回答。
忽然博主意识到，是不是url相对位置不对，导致图片无法加载，又因为代码中的display: none;决定了在初始状态下不显示此图片，博主便注掉了display: none;代码。
.pio-container .pio-show {
left: -1.2em;
bottom: -0.2em;
width: 6em;
height: 6.8em;
display: none;
cursor: pointer;
position: absolute;
transition: all .3s;
background: url(avatar.png) center/contain;
opacity: 0.7;
}注掉后对网页进行清除缓存操作并刷新，发现效果如下，图片能正常显示。
那么就意味着我们的路径写的没错，能够正常加载图片。
1.3 其他bug？？
就在我百思不得其解的时候，我想起了可以在网页查看对应的区块css属性。然后我在bug出现的情况下，按浏览器的F12找到了live2d的代码。如下图所示.
发现出现了一个没见过的样式，来自于bootstrap.min.css(经查询，不是live2d的css，是博客主题的css)。
.hidden {
display: none !important
}
再次询问GPTdisplay: none !important起什么作用。
看到GPT，我恍然大悟，原来是这个代码在作祟！！！！🤬🤬🤬🤬怪不得不显示！！！！
1.4 bug原因
因为博主的博客主题不是原大佬的Sakura主题，故博客主题的hidden属性与live2d的hidden属性重名，但是博客主题的优先级更高，导致css设置被覆盖，始终无法显示。
插件原理是图片avatat.png在常规情况下被属性display: none;设置为处于隐藏状态，一旦我们点击隐藏按钮，则取消图片的隐藏状态，并应用 display: block;属性显示图片，
二、结论（如何解决bug？？）
2.1 引用大佬链接小伙伴看这里
将大佬的pio.css和pio.js文件下载到本地，方便我们进行修改。
pio.js的修改：找到文件的第248行代码，有注释写着 // 隐藏状态，将下图的两个hidden修改为l2dhidden，为了避免重名。
修改后：
pio.css的修改：将下图的hidden修改为l2dhidden~~
修改后：
将两个文件保存并上传到服务器主题文件夹下，修改主题文件夹目录下footer.php中的pio.css和pio.js引用部分，修改为引用本地css&js。保存并清理网页缓存，刷新页面，再次进行bug操作我们会发现，bug已经被成功解决！！！🎉🎉🎉🎉
2.2 采用本地部署的小伙伴看这里
找到服务器上live2d文件夹下的pio.js和pio.css。
pio.js的修改：pio.js的修改：找到文件的第248行代码，有注释写着 // 隐藏状态，将下图的两个hidden修改为l2dhidden，为了避免重名。
修改后：
pio.css的修改：将下图的hidden修改为l2dhidden~~
修改后：
修改完毕后，保存并上传服务器，清除网页缓存并刷新页面，我们进行bug复现操作，会发现bug已经成功解决！！！！！🎉🎉🎉🎉🎉🎉🎉🎉。
至此，享受真正属于你的嘉然吧！！！