如何在自己开发的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
下面就是它的代码
<!DOCTYPE html>
<html>
<head>
<title>我的看板娘</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/girl.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/L2Dwidget.0.min.js"></script>
<script type="text/javascript" src="js/L2Dwidget.min.js"></script>
</head>
<body>
<script>
L2Dwidget.init({"display": {
"superSample": 2,
"width": 200,
"height": 400,
"position": "right",
"hOffset": 0,
"vOffset": 0
}
});
</script>
<!-- 这个script就写在html里面，千万不要把它加入引用文件，因为它需要等页面渲染完毕再执行，不然可爱的看板娘不会出来哦 -->
</body>
</html>
head里面就是一些简单的对文件的引用，稍微有点web开发知识都知道了。
好了，万事俱备，只欠打开浏览器了，让我们直接打开——看板娘.html
你的网页
嘻嘻，可爱的女孩就出现在了你网页的右下角，嘿嘿，通过你的点击她还可以做出不同的表情，她的眼睛也是跟随你鼠标的移动而移动，可以说非常可爱了。你别乱点哦，即使要乱点，也要在周围没有人而且带上耳机的情况下，她会说话的（就是那些见不得人的新津话），哈哈开玩笑，总之是非常可爱了。
好了，这个教程就到这里结束！溜了~
