效果如下:
WordPress博客添加看板娘(送37套服饰)
1. 从我的github下载压缩包
该压缩包已经自带37套服饰、支持换装功能、支持经典动漫台词展示、未来还会支持钉宫日语50音发声喔~
2. 将下载的压缩包 上传到网站的根目录,并解压
scp live2d_v1.0.zip root@xx.xx.xx.xx:/usr/local/nginx/html/vwhm_net_wwwroot/
3. 在header.php文件中添加以下代码
cd wp-content/themes/twentyseventeen/
<link rel="stylesheet" href="/live2d/css/live2d.css" /><script type="text/javascript" src="/libs/jquery/2.1.4/jquery.js"></script>
4. 在footer.php文件中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 class="switch-button">换装</div></div><script type="text/javascript">var message_Path = '/live2d/'var home_Path = '' //此处修改为你的域名，必须带斜杠</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">var index = Math.ceil(Math.random()*37)console.log('未闻花名 + ' + index)loadlive2d("live2d", "/live2d/model/pio/model_"+index+".json");</script>
搞定~打完收工~
附录:
以下是普通demo.html页面中,集成看板娘的步骤:
live2d目录文件
live2d目录中已经有了所有的js.css.model等文件正式开工1. 在任意一个与live2d目录同级的html页面中的 head 标签内插入如下代码：<link rel="stylesheet" href="/live2d/css/live2d.css"/><script src="/jquery/2.1.4/jquery.min.js"></script>2. 在 body 标签的最后面 插入 Live2D 看板娘的元素: <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>3. 在 body 标签结束前插入如下代码：<script type="text/javascript">var message_Path = '/live2d/'var home_Path = '/‘ //此处修改为你的域名，必须带斜杠</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">// 随机换衣服var index = Math.ceil(Math.random()*37)loadlive2d("live2d", "/live2d/model/pio/model_"+index+".json");</script>
