# 參考資料
主要的程式碼都是參考這位 花园仓鼠 大佬的文章跟檔案
我基於他的程式碼去做小修改
花园仓鼠
在Hexo中添加一个看板娘
花园仓鼠Github
Live2D-web
# 本地加載
因為我不是參考大佬的 cdn加載 做法
除了我目前也正在學 Live2D ，未來方便預覽我自己的模型到網頁。
當然主要還是我技術力不行，我不會，至少短期內我不想研究。
把大佬的項目下載後，扔進 source 資料夾底下當作靜態文件。
# 將 Live2D 套件嵌入主題
header.ejs
檔案路徑在{blog}\themes\shoka\layout\_partials\header.njk
添加以下程式碼至開頭，讓每個網頁都添加下列程式碼至<head>
<!-- Live2D SDK --> | |
<script src="/live2d-web/live2d-web.js"></script> |
footer.ejs
檔案路徑在{blog}\themes\shoka\layout\_partials\footer.njk
添加以下程式碼至尾部，讓網頁載入時自動加載 Live2D 模型
<script src="/live2d-web/live2d-web.js"></script> | |
<script> | |
if (screen.width >= 768) { | |
let localConfig = { | |
live2d_path: './live2d-web/', | |
model_path: './live2d-web/model/' | |
}; | |
initLive2d(localConfig);// 在合适的时机初始化 | |
} | |
</script> |
# 文章頁面模型不加載
如果主頁可以正常預覽，而在貼文頁面重載無法正確預覽。
這是因為讀取模型時的出發點不在專案檔中，而是該 md 檔為準。
因此，需要至主控台去查看問題點。
查看主控台為 live2d-web.js 讀取 css 、 *.model 模型檔時出了路徑問題
因此我是這樣修正
async function initLive2d(config) { | |
if (!config.live2d_path.endsWith("/")) config.live2d_path += "/"; | |
if (!config.model_path.endsWith("/")) config.model_path += "/"; | |
// 修改成絕對路徑指向正確位置，不然預設是本地點出來 | |
config.live2d_path = "/live2d-web/" | |
config.model_path = "/live2d-web/model/" | |
await loadExternalResource(config.live2d_path + "waifu.css", "css"); | |
await loadExternalResource(config.live2d_path + "pixi.min.js", "js"); | |
await loadExternalResource(config.live2d_path + "live2d.min.js", "js"); | |
await loadExternalResource(config.live2d_path + "live2dcubismcore.min.js", "js"); | |
await loadExternalResource(config.live2d_path + "pixi-live2d-display.min.js", "js"); | |
// 以下略... |
# 人物比例不對
直接套用的話，會發現人物的比例不太對
#live2d { | |
position: relative; | |
width: 500px; /* 修正大小不要讓他看起來很扁 */ | |
height: 350px; | |
left: 0%; /* 修正位置以符合寬度 */ | |
} | |
#waifu-tips { | |
animation: shake 50s ease-in-out 5s infinite; | |
background-color: rgba(236, 217, 188, .5); | |
border: 1px solid rgba(224, 186, 140, .62); | |
border-radius: 12px; | |
box-shadow: 0 3px 15px 2px rgba(191, 158, 118, .2); | |
font-size: 14px; | |
line-height: 24px; | |
/* margin: -70px 20px; */ | |
margin: -70px 9em; /* 有修正位置 */ | |
min-height: 70px; | |
opacity: 0; | |
overflow: hidden; | |
padding: 5px 10px; | |
position: absolute; | |
text-overflow: ellipsis; | |
transition: opacity 1s; | |
width: 250px; | |
word-break: break-all; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
#waifu-tool { | |
color: #aaa; | |
opacity: 0; | |
position: absolute; | |
top: 50px; | |
right: 5em; /* 有更動做修改 */ | |
transition: opacity 1s; | |
} |
# 隱藏並重整保持消失且按鈕無作用
這是因為 waifu-tips.js ，原訂隱藏後 一天 後才會再次自動出現
若是 隱藏後重整頁面 ，看板娘位置的所有按鈕功能都會失效
為此改動了 判斷時間 ，設置 0，重整後就會再次出現
function initWidget(config) { | |
document.body.insertAdjacentHTML("beforeend", `<div id="waifu"><div id="waifu-tips"></div><canvas id="live2d"></canvas><div id="waifu-tool"></div></div>`); | |
document.body.insertAdjacentHTML("beforeend", '<div id="waifu-toggle"><span>看板娘</span></div>'); | |
const toggle = document.getElementById("waifu-toggle"); | |
toggle.addEventListener("click", () => { | |
toggle.classList.remove("waifu-toggle-active"); | |
if (toggle.getAttribute("first-time")) { | |
loadWidget(config); | |
toggle.removeAttribute("first-time"); | |
} else { | |
localStorage.removeItem("waifu-display"); | |
document.getElementById("waifu-tips").style.display = ""; | |
document.getElementById("waifu-tool").style.display = ""; | |
setTimeout(() => { | |
Live2dModel.showModel(); | |
document.getElementById("waifu").style.bottom = 0; | |
}, 0); | |
} | |
}); | |
// 修正隱藏後要消失多久的時間才會再出現 | |
// 設置 0 是確保每次刷新都會出現 | |
// if (localStorage.getItem("waifu-display") && Date.now() - localStorage.getItem("waifu-display") <= 86400000) { | |
if (localStorage.getItem("waifu-display") && Date.now() - localStorage.getItem("waifu-display") <= 0) { | |
toggle.setAttribute("first-time", true); | |
setTimeout(() => { | |
toggle.classList.add("waifu-toggle-active"); | |
}, 0); | |
} else { | |
loadWidget(config); | |
} | |
} | |
window.initWidget = initWidget; |
