简单几步在WordPress中添加Live2D

发布于 2019-08-16  44 次阅读


原作者地址: 
https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02

项目地址: 
https://github.com/galnetwen/Live2D

从这里开始吧

Step1.到项目地址下载live2d文件夹到博客根目录 
如下图所示

Step2.在header里面添加以下两段语句

<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> 

Step3.在footer中添加以下语句 

<script type="text/javascript">
     var message_Path = '/live2d/'
     var home_Path = 'http://www.mrkaria.com/'  //此处修改为你的域名,必须带斜杠 
</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", "/live2d/model/tia/model.json"); 
</script> 

保存后刷新主页OK


春赏百花冬观雪,醒亦念卿,梦亦念卿。