先贴出大佬的文章地址，因为这个项目是采用前后端分离的模式，所以分为两部分：前端代码的搭建以及后台API的搭建。当然作者也是贴出了现成的API调用地址，但是我们最好还是自己搭建一个API服务器，因为这样就可以自己修改和添加模型（别人的接口请求量太多了，我们还是体谅一下别人吧）。
好的现在开始教程：
先到作者的github上面下载前端代码
下载好后可以直接放到我们服务器的根目录，接下来我们就可以开始把调用代码嵌入到我们的网页中去。
目前有两种方式：直接嵌入或者调用js代码自动嵌入
先来讲一下直接嵌入，先嵌入如下代码到头部(注意修改waifu.css的地址)：
<link rel="stylesheet" type="text/css" href="https://www.example.com/path/to/waifu.css"/>
然后在加入如下代码到尾部（注意：须 jQuery 支持）
<div class="waifu">
<!-- 提示框 -->
<div class="waifu-tips"></div>
<!-- 看板娘画布 -->
<canvas id="live2d" class="live2d"></canvas>
<!-- 工具栏 -->
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="path/to/waifu-tips.js"></script>
<script src="path/to/live2d.js"></script>
<!-- 初始化看板娘，加载 waifu-tips.json -->
<script type="text/javascript">
/* 可直接修改部分参数 */
live2d_settings['modelId'] = 5; // 默认模型 ID
live2d_settings['modelTexturesId'] = 1; // 默认材质 ID
/* 在 initModel 前添加 */
initModel("https://www.example.com/path/to/waifu-tips.json")
</script>
当然，我们可以直接自动加载，如果你要自动加载的话，前面两部都不需要做，直接在尾部嵌入如下代码
<script src="https://www.example.com/path/to/autoload.js" type="text/javascript"></script>
然后在修改一下autoload.js，把里面的引用文件改一下路径。然后就可以直接使用了，如果不想搭API服务器的可以先走了，下面我们讲一下怎么搭建API服务器(搭建自己API的好处就是可以自己添加模型还可以节作者服务器的负担)：
[dangerbox title="注意"]这里说一下可能遇到的坑
1.要使用看板娘我们就必须让我们的网页有jQuery，这里就是直接引入jQuery文件就行了，具体自己到百度上搜
2.如果你选择的是自动引入，我们那个引入时需要修改路径，autoload.js里面的几个文件必须是你自己网站的完整路径（要加上网址的完整路径）。
3.autoload.js里面有一个文件是写错了的，waifu.css这个文件中间没有min，这个要特别注意。
[/dangerbox]
首先先到作者的github上面下载模型切换的API源码
下载好好直接上传到自己服务器的根目录即可，比如我们在自己的根目录下新建一个API的文件夹，API源码就放放在里面。
然后到waifu-tips.js文件夹里面修改一下，改成自己的API地址
接下来，就可以直接访问自己的网站查看效果了。当然这个文件里面可以修改自己看板娘的大小。
注意：你需要先清除浏览器的数据，然后才能看到。
还有，这里在写文件路径的时候最好加上自己的网址，单纯使用相对路径好像没用。(可能是我相对路径引用错了吧。)当然如果你想调节看板娘的大小的话可以修改wifu-tip的那个js文件。
最后给大家看下效果
