Hello,大家好,大家看到本博客左边那个萌萌的看板娘了吗,想不想要。我猜一定很想,本期就教大家怎么领养一只看板娘。?
首先是效果预览和准备工作
效果预览
かわいい
准备工作
1.首先去下载看板娘文件
蓝奏云
2.把下载的文件上传到你的主题目录,路径可以自己决定,把解压出来的文件夹重命名成live2d

到这里准备工作算是结束了,下面开始撸代码。
代码
1.在你的wordpress主题头部文件header.php加入下面的代码:
<link rel="stylesheet" href="/live2d/css/live2d.css" />
2.在尾部文件footer.php的</body>标签结束之前插入代码:
<div id="landlord"> <div class="message" style="opacity:0"></div> <canvas id="live2d" width="280" height="360" class="live2d"></canvas> </div> <script type="text/javascript"> var message_Path = '/live2d/' var home_Path = 'https://www.ihli.xyz/' //此处修改为你的域名,必须带斜杠 </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>

3.如果你想修改看板娘说的话,请在message.json文件进行修改
示例:
{ "mouseover": [ { "selector": ".title a", //此处修改为你页面元素的标签名 "text": ["要看看 {text} 么?"] //此处修改为你需要提示的文字 }, { "selector": "#searchbox", "text": ["在找什么东西呢,需要帮忙吗?"] } ], "click": [ //此处是 Live2D 看板娘的触摸事件提示 { "selector": "#landlord #live2d", "text": ["不要动手动脚的!快把手拿开~~", "真…真的是不知羞耻!","Hentai!", "再摸的话我可要报警了!⌇●﹏●⌇", "110吗,这里有个变态一直在摸我(ó﹏ò。)"] } ] }
清除缓存刷新网页即可看见效果
注意:路径别弄错了
还有,为什么和我的不一样,不要问,问就是因为我长得帅。