如何在自己开发的web中放入“看板娘”

什么是看板娘？

那就她了——>

就是她~

看板娘是一种职业和习惯称呼，也是ACGN次文化中的萌属性之一。简而言之就是小店的女服务生，也有“吸引顾客，招揽生意，提高人气”等作用类似品牌形象代言人的含义。看板(kanban)是日语特有的管理名词，其英文可以是“signboard”或者“visible record”。通常，看板是一张标签或卡片，放在透明颜料袋装内，或贴在零件上，或贴在盛装制品的容器上，还可以是流水线上各种颜色的小球或信号灯、电视图象等。

作为web开发者的绅士（死肥宅）们，怎么能拒绝一个这么可爱的妹子帮你看护你的网站呢！
好了下面就来简单介绍一下怎么把她放到你开发的网站里。

首先，我们需要到大佬那里去下载一下这个看板娘的资源（就是字面意思）。https://www.jsdelivr.com/package/npm/live2d-widget
就是上面这个网站了。

进去之后呢是这个页面

网页网页

看见那个下载标志没，点击下载（没看见就是昨天**了眼花）
下载好了就是这个文件

下载文件

然后用自己常用的方法进行解压（这不需要我教你吧）

解压顺序左——>右

这个狗贼居然有两层压缩，反正最后解压出来的文档就是package文件夹了

让我们一起打开这个文件夹嗷

package文件夹

这时候有人就会说了：wdnmd，这么多玩意，我怎么知道用哪个？
莫急，我一步一步给你说。

进入lib文件夹——>拿走下面四个经过标记的文件（复制走，别剪切，万一以后还有用）

就是这四个文件啦

下面我简单弄一个基础的web开发结构，告诉你们怎么请出我们可爱的看板娘
首先建立一个web文件夹

web文件夹

里面的目录结构是这样的

目录结构

然后把刚刚复制的四个文件放入js文件夹

js文件夹

接下来我们需要自己写一个css文件，我就将它命名为girl.css好了

girl.css

它的代码如下：

#live2dcanvas {
    border: 0 !important;
}

没错就是那么少

然后我们再建立一个看板娘.html文件，放在根目录下

html

下面就是它的代码

head里面就是一些简单的对文件的引用，稍微有点web开发知识都知道了。

好了，万事俱备，只欠打开浏览器了，让我们直接打开——看板娘.html

你的网页

嘻嘻，可爱的女孩就出现在了你网页的右下角，嘿嘿，通过你的点击她还可以做出不同的表情，她的眼睛也是跟随你鼠标的移动而移动，可以说非常可爱了。你别乱点哦，即使要乱点，也要在周围没有人而且带上耳机的情况下，她会说话的（就是那些见不得人的新津话），哈哈开玩笑，总之是非常可爱了。

好了，这个教程就到这里结束！溜了~