喵呜机博客

第一步：准备原材料(レム酱)

首先，我们要得到蕾姆的Live2d资源文件，可参考hojun的文章自行提取，也可以从我的Github上下载(根目录下的model/11)。注意如果是自行提取的，11.json中需要略微修正一下括号的错误(我的Github上面的版本已更正)，否则网页会读取错误。如果想要预览文件，可以使用live2dViewer。

第二步：准备CSS/JSON文件

要把蕾姆在页面上显示出来，需要借助几个文件。分别是jquery.js(或jquery.min.js)、live2d.js(或live2d.min.js，这个是核心)、以及live2d.css(样式表)
下载链接：[https://pan.baidu.com/s/1Tt3dCm0m5SBwqFUum-qP0g] 提取码：bgh8

第三步：网页的HTML

可参考我博客上的代码（注意将文件地址换成自己的）：


 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Live2D</title>
   <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/devbobcorn/live2d.css" />
   <script src="https://blog-static.cnblogs.com/files/devbobcorn/jquery.min.js"></script>
  </head>
  <body>
   <script src="https://blog-static.cnblogs.com/files/devbobcorn/live2d.min.js"></script>
   <div id="landlord">
    <canvas id="live2d" width="280" height="310" class="live2d"></canvas>
   </div>
   <script type="text/javascript">
     loadlive2d('live2d', '//raw.githubusercontent.com/DevBobcorn/Live2d-Resource/master/model/11/11.json');
 </script>
 </body>
</html>

注意：因为我穷到买不起~~卡德蒙的リンゴ~~服务器，博客园又没有办法传文件夹，所以我把文件传到了Github上，但是Github的文件储存网站受到了DNS污染，所以可能要手动修改hosts文件或借助魔法来使模型正常加载。如果你存放在了自己的网站上则不必担心，但要注意对于Live2d资源文件，注意一定要维持原来的目录结构，不能把文件分开。