前言
在需要添加live2d的界面文件,添加代码,这里以hexo-theme-butterfly为例
引入
网络引入
引入css:
1
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ooahz/Live2d-Histoire@latest/JSD/css/live2d.css" />
|
引入js:
1 2 3 4 5 6 7
| <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js"></script> <script> var message_Path = 'https://cdn.jsdelivr.net/gh/ooahz/Live2d-Histoire@latest/JSD/'; var talkAPI = ""; </script> <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/ooahz/Live2d-Histoire@latest/JSD/js/live2d.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/ooahz/Live2d-Histoire@latest/JSD/js/message.js"></script>
|
本地引入
下载Live2dHistoire
将解压后的live2d文件夹放在主题的资源文件文件夹(themes\butterfly\source
)路径下
引入css:
1
| <link rel="stylesheet" href="/Live2d-Histoire/JSD/css/live2d.css" />
|
引入js:
1 2 3 4 5 6 7
| <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js"></script> <script> var message_Path = '/Live2d-Histoire/JSD/'; var talkAPI = ""; </script> <script type="text/javascript" src="/Live2d-Histoire/JSD/js/live2d.js"></script> <script type="text/javascript" src="/Live2d-Histoire/JSD/js/message.js"></script>
|
添加主体
在需要添加live2d的页面,添加下面的主体内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <div id="landlord" style="left:5px;bottom:0px;"> <div class="message" style="opacity:0"></div> <canvas id="live2d" width="500" height="560" class="live2d"></canvas> <div class="live_talk_input_body"> <div class="live_talk_input_name_body"> <input name="name" type="text" class="live_talk_name white_input" id="AIuserName" autocomplete="off" placeholder="你的名字" /> </div> <div class="live_talk_input_text_body"> <input name="talk" type="text" class="live_talk_talk white_input" id="AIuserText" autocomplete="off" placeholder="要和我聊什么呀?"/> <button type="button" class="live_talk_send_btn" id="talk_send">发送</button> </div> </div> <input name="live_talk" id="live_talk" value="1" type="hidden" /> <div class="live_ico_box"> <div class="live_ico_item type_info" id="showInfoBtn"></div> <div class="live_ico_item type_talk" id="showTalkBtn"></div> <div class="live_ico_item type_music" id="musicButton"></div> <div class="live_ico_item type_youdu" id="youduButton"></div> <div class="live_ico_item type_quit" id="hideButton"></div> <input name="live_statu_val" id="live_statu_val" value="0" type="hidden" /> <audio src="" style="display:none;" id="live2d_bgm" data-bgm="0" preload="none"></audio> <input name="live2dBGM" value="音乐地址" type="hidden"> <input name="live2dBGM" value="音乐地址" type="hidden"> <input id="duType" value="douqilai,l2d_caihong" type="hidden"> </div> </div> <div id="open_live2d">召唤伊斯特瓦尔</div>
|
预览
我在留言页面添加了这个live 2d 戳我快速查看
网站添加Live2d的看板娘——伊斯特瓦尔(Histoire)