博客搭建（6.4）：看板娘

萌萌的看板娘谁不想要呢
我也没有完全弄明白这个东西，但目前来说也已经足够用了

功能介绍

基础功能：读诗，打飞机（不是），换角色，换装，鼠标点击调戏看板娘

飞机大战：W键前进，A，D转向，空格发射子弹，子弹可以吞掉页面元素甚至删掉看板娘，快来和看板娘一起打飞机吧

1.拥有自己的看板娘

1.进入github仓库看板娘下载压缩包，解压到主题文件夹下的source目录下

2.然后找到模版文件夹D:\Blog\themes\matery\layout\_partial下找到head.js文件
将下面的代码加入进去

<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="/live2d-widget-master/autoload.js"></script>

2.增加看板娘模型

此时进入自己的博客就可以看到拥有了一个自己的看板娘了，但测试后发现有些问题，点击看板娘时说话总是闪，而且好像模型衣服很少。
先解决后面的问题，让看板娘丰富起来
参考文章看板娘完善
在这个目录下面D:\Blog\themes\matery\source\live2d-widget\找到autoload.js文件,添加下面的代码

cdnPath: "https://npm.elemecdn.com/akilar-live2dapi@latest/",

然后测试发现看板娘的种类就丰富起来了

3.解决看板娘闪烁问题并增加文字提示功能

如图，当我鼠标悬浮到不同地方时，看板娘会有响应的提示语

在D:\Blog\themes\matery\source\live2d-widget\路径下，找到autoload.js文件，将路径切换为本地路径

在该目录下D:\Blog\themes\matery\source\live2d-widget\找到waifu-tips.json文件
可以看到这些就是看板娘的语言
对应的触发条件：
mouseover：鼠标悬浮到相应位置
click：鼠标点击
season，time：到对应时间
message：默认语言

点击闪烁的bug应该就是由于鼠标悬浮触发了一次语言，然后点击又触发了一次语言，所以就是把悬浮的语言剪切到点击的语言当中

至于鼠标悬浮到标签栏上面对应的语言也就很简单了，只需要添加相应的地址和文本即可，以标签栏举例,以下面代码为模版，换成相应的地址即可

{
	"selector": "a[href='/tags']",
	"text": [ "所有文章都穿上彩色标签啦~", "按颜色找文章会不会更有趣呢？(◕‿◕✿)" ]
},

普通地址比较方便，搜索栏和黑夜模式的比较特殊，需要在浏览器中查找，这里就直接给出了,可以替换相应的文本内容

{
	"selector": "a[href='#searchModal'], .modal-trigger",
	"text": [
		"点我可以搜索文章哦～",
		"找不到内容？试试搜索吧！(◕‿◕✿)",
		"输入关键词，我会帮你找找看！"
	]
},
{
	"selector": "#sum-moon, .fa-moon, .fa-sun",
	"text": [
		"点击切换白天/黑夜模式～",
		"护眼模式 ON！(｡•̀ᴗ-)✧",
		"熬夜写代码记得开暗黑模式哦！"
	]
},

具体的查找步骤，在浏览器博客页面按f12打开开发者工具，ctrl+shift+c或者手动选择元素选择器，然后点击要查找的元素，
id=的内容即为所需内容，