效果如下:
WordPress博客添加看板娘(送37套服饰)
1. 从我的github下载压缩包
该压缩包已经自带37套服饰、支持换装功能、支持经典动漫台词展示、未来还会支持钉宫日语50音发声喔~
2. 将下载的压缩包 上传到网站的根目录,并解压
scp live2d_v1.0.zip [email protected]:/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="http://apps.bdimg.com/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 = 'http://vwhm.net' //此处修改为你的域名，必须带斜杠
</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('未闻花名vwhm.net + ' + 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="https://cdn.bootcss.com/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 = 'https://vwhm.net/‘ //此处修改为你的域名，必须带斜杠
</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>