如何把可爱的Live2d看板娘放到自己的网页上

发现好多的博客页面上有这样一个看板娘，非常的讨人喜欢，于是自己就尝试将其添加入网页。

效果图：

首先下载资源并解压：https://www.lanzous.com/i5xllwh
双击live2d.html，这就是一个已经弄好的示例网页。（暂时还没有换装/换人物的一些功能）

用编辑器打开网页源码
这一段是需要引用的css：

<link rel="stylesheet" href="live2d/css/live2d.css" />

这一段是body中需要添加的元素：

<div id="landlord">
    <div class="message" style="opacity:0"></div>
    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
    <div class="hide-button">隐藏</div>
</div>

这一段是在body尾部需要引用的javascript资源：

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>//添加jquery环境（必须）
<script type="text/javascript">
    var message_Path = 'https://6dduu6.github.io/live2d/' //message.js的目录（必须填写，否则无法加载交互的文字）
    var home_Path = 'https://6dduu6.github.io/' //网站的根目录
</script>
<script type="text/javascript" src="live2d/js/live2d.js"></script>
<script type="text/javascript" src="live2d/js/message.js"></script>
<script type="text/javascript">
    loadlive2d("live2d", "https://6dduu6.github.io/live2d/model/pio/model.json"); //model.json和其模型等都需要放在服务器网站上
</script>

把这些代码加在所要添加的网页上的对应位置就行了。
建议把资源丢到自己的服务器或github网站中，引用自己的资源地址！！

学习自：
https://blog.csdn.net/kids_calamus/article/details/82719896
https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02

我的github：https://github.com/6DDUU6/6DDUU6.github.io/
示例网站：https://6dduu6.github.io/live2d.html