網頁添加 Live2D 看板娘
參考并轉載于https://www.fghrsh.net/post/123.html
個人網站添加Live2D 看板娘的方法：
在頁面中加入以下代碼（已經全部處理完，可以根據需求適當修改）：
<!DOCTYPE html>
<html>
<head>
<title>Live2D 看板娘 測試dome</title>
<link >
</head>
<body style="font-family: 'Microsoft YaHei';">
<!-- waifu-tips.js 依賴 JQuery 庫 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<!-- 實現拖動效果，需引入 JQuery UI -->
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-dist@1.12.1/jquery-ui.min.js"></script>
<!-- 使用 aotuload.js 引入看板娘 -->
<script>
try {
var url = 'https://live2d-cdn.fghrsh.net/';
$("<link>").attr({
href: url+"assets/1.4.2/waifu.min.css",
rel: "stylesheet",
type: "text/css"
}).appendTo('head');
$('body').append('<div class="waifu"><div class="waifu-tips"></div><canvas id="live2d" class="live2d"></canvas><div class="waifu-tool"><span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span></div></div>');
$.ajax({
url: url+'assets/1.4.2/waifu-tips.min.js',
dataType: "script",
cache: true,
success: function () {
$.ajax({
url: url+'assets/1.4.2/live2d.min.js',
dataType: "script",
cache: true,
success: function () {
live2d_settings['hitokotoAPI'] = 'hitokoto.cn';
live2d_settings['modelId'] = 5;
live2d_settings['modelTexturesId'] = 1;
live2d_settings['modelStorage'] = false;
initModel(url+'assets/1.4.2/waifu-tips.json');
}
});
}
});
} catch (err) {
console.log('[Error] JQuery is not defined.')
}
</script>
</body>
</html>
博客園添加Live2D 看板娘的方法：
在設置的頁腳中添加以下js代碼即可（已經全部處理完，可以根據需求適當修改）：
<!-- waifu-tips.js 依賴 JQuery 庫 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<!-- 實現拖動效果，需引入 JQuery UI -->
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-dist@1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$("<link>").attr({href: "https://live2d-cdn.fghrsh.net/assets/1.4.2/waifu.min.css", rel: "stylesheet", type: "text/css"}).appendTo('head');
/* 把 autoload.js 內容直接內置 */
$('body').append('<div class="waifu"><div class="waifu-tips"></div><canvas id="live2d" class="live2d"></canvas><div class="waifu-tool"><span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span></div></div>');
$.ajax({url: "https://live2d-cdn.fghrsh.net/assets/1.4.2/waifu-tips.min.js", dataType:"script", cache: true, success: function() {
$.ajax({url: "https://live2d-cdn.fghrsh.net/assets/1.4.2/live2d.min.js", dataType:"script", cache: true, success: function() {
/* 可直接修改部分參數 */
//live2d_settings['hitokotoAPI'] = 'jinrishici.com'; // 一言 API
// live2d_settings['modelId'] = 2; // 默認模型 ID
// live2d_settings['modelTexturesId'] = 6; // 默認材質 ID
// live2d_settings['modelStorage'] = false; // 不儲存模型 ID
// live2d_settings['canCloseLive2d'] = false; // 隱藏 關閉看板娘 按鈕
// live2d_settings['canTurnToHomePage'] = false; // 隱藏 返回首頁 按鈕
// live2d_settings['waifuSize'] = '600x535'; // 看板娘大小
// live2d_settings['waifuTipsSize'] = '570x150'; // 提示框大小
// live2d_settings['waifuFontSize'] = '30px'; // 提示框字體
// live2d_settings['waifuEdgeSide'] = 'right:30'; // 看板娘貼邊方向
// live2d_settings['waifuToolFont'] = '36px'; // 工具欄字體
// live2d_settings['waifuToolLine'] = '50px'; // 工具欄行高
// live2d_settings['waifuToolTop'] = '-60px'; // 工具欄頂部邊距
// live2d_settings['waifuDraggable'] = 'axis-x'; // 拖拽樣式
/* 內置 waifu-tips.json */
initModel({
"waifu": {
"console_open_msg": ["哈哈，你打開了控制臺，是想要看看我的秘密嗎？"],
"copy_message": ["你都復制了些什么呀，轉載要記得加上出處哦"],
"screenshot_message": ["照好了嘛，是不是很可愛呢？"],
"hidden_message": ["我們還能再見面的吧…"],
"load_rand_textures": ["我還沒有其他衣服呢", "我的新衣服好看嘛"],
"hour_tips": {
"t5-7": ["早上好！一日之計在于晨，美好的一天就要開始了"],
"t7-11": ["上午好！工作順利嘛，不要久坐，多起來走動走動哦！"],
"t11-14": ["中午了，工作了一個上午，現在是午餐時間！"],
"t14-17": ["午后很容易犯困呢，今天的運動目標完成了嗎？"],
"t17-19": ["傍晚了！窗外夕陽的景色很美麗呢，最美不過夕陽紅~"],
"t19-21": ["晚上好，今天過得怎么樣？"],
"t21-23": ["已經這么晚了呀，早點休息吧，晚安~"],
"t23-5": ["你是夜貓子呀？這么晚還不睡覺，明天起的來嘛"],
"default": ["嗨~ 快來逗我玩吧！"]
},
"referrer_message": {
"localhost": ["歡迎閱讀<span style=\"color:#0099cc;\">『", "』</span>", " - "],
"baidu": ["Hello! 來自 百度搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">", "</span> 找到的我嗎？"],
"so": ["Hello! 來自 360搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">", "</span> 找到的我嗎？"],
"google": ["Hello! 來自 谷歌搜索 的朋友<br>歡迎閱讀<span style=\"color:#0099cc;\">『", "』</span>", " - "],
"default": ["Hello! 來自 <span style=\"color:#0099cc;\">", "</span> 的朋友"],
"none": ["歡迎閱讀<span style=\"color:#0099cc;\">『", "』</span>", " - "]
},
"referrer_hostname": {
"example.com": ["示例網站"],
"www.fghrsh.net": ["FGHRSH 的博客"]
},
"model_message": {
"1": ["來自 Potion Maker 的 Pio 醬 ~"],
"2": ["來自 Potion Maker 的 Tia 醬 ~"]
},
"hitokoto_api_message": {
"lwl12.com": ["這句一言來自 <span style=\"color:#0099cc;\">『{source}』</span>", "，是 <span style=\"color:#0099cc;\">{creator}</span> 投稿的", "。"],
"fghrsh.net": ["這句一言出處是 <span style=\"color:#0099cc;\">『{source}』</span>，是 <span style=\"color:#0099cc;\">FGHRSH</span> 在 {date} 收藏的！"],
"jinrishici.com": ["這句詩詞出自 <span style=\"color:#0099cc;\">《{title}》</span>，是 {dynasty}詩人 {author} 創作的！"],
"hitokoto.cn": ["這句一言來自 <span style=\"color:#0099cc;\">『{source}』</span>，是 <span style=\"color:#0099cc;\">{creator}</span> 在 hitokoto.cn 投稿的。"]
}
},
"mouseover": [
{ "selector": ".container a[href^='http']", "text": ["要看看 <span style=\"color:#0099cc;\">{text}</span> 么？"] },
{ "selector": ".fui-home", "text": ["點擊前往首頁，想回到上一頁可以使用瀏覽器的后退功能哦"] },
{ "selector": ".fui-chat", "text": ["一言一語，一顰一笑。一字一句，一顆賽艇。"] },
{ "selector": ".fui-eye", "text": ["嗯··· 要切換 看板娘 嗎？"] },
{ "selector": ".fui-user", "text": ["喜歡換裝 Play 嗎？"] },
{ "selector": ".fui-photo", "text": ["要拍張紀念照片嗎？"] },
{ "selector": ".fui-info-circle", "text": ["這里有關于我的信息呢"] },
{ "selector": ".fui-cross", "text": ["你不喜歡我了嗎..."] },
{ "selector": "#tor_show", "text": ["翻頁比較麻煩嗎，點擊可以顯示這篇文章的目錄呢"] },
{ "selector": "#comment_go", "text": ["想要去評論些什么嗎？"] },
{ "selector": "#night_mode", "text": ["深夜時要愛護眼睛呀"] },
{ "selector": "#qrcode", "text": ["手機掃一下就能繼續看，很方便呢"] },
{ "selector": ".comment_reply", "text": ["要吐槽些什么呢"] },
{ "selector": "#back-to-top", "text": ["回到開始的地方吧"] },
{ "selector": "#author", "text": ["該怎么稱呼你呢"] },
{ "selector": "#mail", "text": ["留下你的郵箱，不然就是無頭像人士了"] },
{ "selector": "#url", "text": ["你的家在哪里呢，好讓我去參觀參觀"] },
{ "selector": "#textarea", "text": ["認真填寫哦，垃圾評論是禁止事項"] },
{ "selector": ".OwO-logo", "text": ["要插入一個表情嗎"] },
{ "selector": "#csubmit", "text": ["要[提交]^(Commit)了嗎，首次評論需要審核，請耐心等待~"] },
{ "selector": ".ImageBox", "text": ["點擊圖片可以放大呢"] },
{ "selector": "input[name=s]", "text": ["找不到想看的內容？搜索看看吧"] },
{ "selector": ".previous", "text": ["去上一頁看看吧"] },
{ "selector": ".next", "text": ["去下一頁看看吧"] },
{ "selector": ".dropdown-toggle", "text": ["這里是菜單"] },
{ "selector": "c-player a.play-icon", "text": ["想要聽點音樂嗎"] },
{ "selector": "c-player div.time", "text": ["在這里可以調整<span style=\"color:#0099cc;\">播放進度</span>呢"] },
{ "selector": "c-player div.volume", "text": ["在這里可以調整<span style=\"color:#0099cc;\">音量</span>呢"] },
{ "selector": "c-player div.list-button", "text": ["<span style=\"color:#0099cc;\">播放列表</span>里都有什么呢"] },
{ "selector": "c-player div.lyric-button", "text": ["有<span style=\"color:#0099cc;\">歌詞</span>的話就能跟著一起唱呢"] },
{ "selector": ".waifu #live2d", "text": ["干嘛呢你，快把手拿開", "鼠…鼠標放錯地方了！"] }
],
"click": [
{
"selector": ".waifu #live2d",
"text": [
"是…是不小心碰到了吧",
"蘿莉控是什么呀",
"你看到我的小熊了嗎",
"再摸的話我可要報警了！?●﹏●?",
"110嗎，這里有個變態一直在摸我(ó﹏ò?)"
]
}
],
"seasons": [
{ "date": "01/01", "text": ["<span style=\"color:#0099cc;\">元旦</span>了呢，新的一年又開始了，今年是{year}年~"] },
{ "date": "02/14", "text": ["又是一年<span style=\"color:#0099cc;\">情人節</span>，{year}年找到對象了嘛~"] },
{ "date": "03/08", "text": ["今天是<span style=\"color:#0099cc;\">婦女節</span>！"] },
{ "date": "03/12", "text": ["今天是<span style=\"color:#0099cc;\">植樹節</span>，要保護環境呀"] },
{ "date": "04/01", "text": ["悄悄告訴你一個秘密~<span style=\"\">今天是愚人節，不要被騙了哦~</span>"] },
{ "date": "05/01", "text": ["今天是<span style=\"color:#0099cc;\">五一勞動節</span>，計劃好假期去哪里了嗎~"] },
{ "date": "06/01", "text": ["<span style=\"color:#0099cc;\">兒童節</span>了呢，快活的時光總是短暫，要是永遠長不大該多好啊…"] },
{ "date": "09/03", "text": ["<span style=\"color:#0099cc;\">中國人民抗日戰爭勝利紀念日</span>，銘記歷史、緬懷先烈、珍愛和平、開創未來。"] },
{ "date": "09/10", "text": ["<span style=\"color:#0099cc;\">教師節</span>，在學校要給老師問聲好呀~"] },
{ "date": "10/01", "text": ["<span style=\"color:#0099cc;\">國慶節</span>，新中國已經成立69年了呢"] },
{ "date": "11/05-11/12", "text": ["今年的<span style=\"color:#0099cc;\">雙十一</span>是和誰一起過的呢~"] },
{ "date": "12/20-12/31", "text": ["這幾天是<span style=\"color:#0099cc;\">圣誕節</span>，主人肯定又去剁手買買買了~"] }
]
});
}});
}});
$(".waifu")[0].style.zIndex = "100";//看板娘層級始終為最前
</script>
浙公網安備 33010602011771號