大家好，我是程式設計師魚皮。
大家如果平時使用網站或產品時出現了問題，一般都會去尋找 “聯絡客服” 的位置，從而獲得人工的幫助。我們團隊的面試刷題產品 - 面試鴨最近就遇到了這樣一個難題：明明我們網站右下角就有聯絡客服按鈕、而且我們每道面試題目下方都有反饋按鈕，但是很多使用者還是不知道怎麼給我們反饋問題。
我們利用第三方網站統計工具進行分析，發現整整一個月客服按鈕的點選數竟然才 20 多？！感覺毛用沒有啊！
於是，我就拉著開發同學一起開會討論，希望解決這個問題。
我說：作為良心產品，我要讓使用者都知道怎麼找我們反饋問題！怎麼實現我不管，明天上線！
開發小 A 當時就這個表情：
結果，一天後，小 A 竟然真的拿電腦來給我看效果了。我一看，立刻就紅溫了，就跟剛煮熟的螃蟹似的：
這。。這 ** 是客服？我們這可是一個正經網站啊！
不過仔細想一想，感覺還挺不錯的，這下網站可真是充滿了吸引力啊！應該會有很多同學點選了（狗頭）。
我本來以為這個客服形象需要花費很長時間開發，結果小 A 跟我說：可簡單了，一會兒就搞定了~
於是，我也去學習瞭解了一下，確實簡單，這篇文章就分享給大家。
⭐️ 喜歡看影片的同學，更推薦看影片教程哦：https://bilibili.com/video/BV1FeUaYDEKr/
網站看板娘教程
其實前面我們看到的動漫看板娘，是運用了 Live2D 技術實現的。
Live2D 是一種將 2D 影像轉換為各種動畫效果的技術。透過骨骼動畫和物理引擎等技術，能夠實現類似 3D 的立體動畫效果，但實際仍然是 2D 影像的變形和運動。
相比於 GIF 圖片，Live2D 模型可以實時和使用者進行互動，更加吸引使用者。
怎麼樣，是不是迫不及待也想給自己的網站整一個呢？
下面只用 1 分鐘，手把手教你怎麼給網站快速新增一個可愛的 Live2D 看板娘。對於提高網頁點選率和使用者訪問時長來說，應該還是很有幫助的。
來不及學的朋友，記得點個收藏，以後說不定用得上。
一、準備工作
首先，我們需要準備 2 樣東西：一套 Live2D 模型檔案，和讓網站載入模型的 JS 指令碼。
1、模型檔案
每個 Live2D 模型都對應了一組檔案，定義了模型資訊、物理效果、姿勢動作、圖片資源等，結構十分複雜：
而且模型檔案格式又分為 MOC 和 MOC3 兩個版本，MOC3 的模型不僅視覺效果更好，還支援更復雜、更自然流暢的動作，但相應的檔案結構會更復雜。我們開頭看到的網站中的二次元紅衣子女，就是用的 MOC3 的模型。
雖然模型複雜，不過別擔心，我們可以透過 Live2D 官網和 GitHub 的開源專案搜到現成的模型檔案：
-
Live2D 官方：
-
⭐️ 有很多模型和示例站點：https://github.com/imuncle/live2d
-
模型收集：https://github.com/Eikanya/Live2d-model
友情提示，由於 Live2D 的開發是需要大量時間精力的， 一般高質量的模型都有版權保護，所以請大家謹慎使用 。
2、JS 指令碼
有了模型檔案，我們怎麼讓它出現在網站上呢？這就需要 JS 指令碼。
我們可以利用 WebGL 這一主流的圖形渲染技術來編寫 JS 指令碼。但這個技術有一定的複雜度和學習成本，我想哪怕你是一個經驗豐富的網站開發者，也不會想要自己寫 WebGL 程式碼去載入 Live2D 模型的。
我們可以使用一些現成的庫來簡化編碼，比如 2D 渲染引擎 pixi.js，或者使用 Live2D 官方提供的 Web SDK。
但是，如果你沒有兩把刷子，估計看不懂那破朔迷離的官方文件。所以呢，要說貼心，還得是咱廣大網友，在 GitHub 上開源了不少開箱即用的 Live2D 載入庫。
經過我的一番對比，還是 star 數高的這個庫最好用。使用它，不用自己寫一行程式碼，就能給網站增加看板娘！下面來試一試。
開源倉庫：https://github.com/stevenjoezhang/live2d-widget（不包含模型）
二、快速接入看板娘
如果你是小白，只需要複製下面這一行自動載入指令碼的程式碼， 放到你網站 html 頁面的 head 或 body 中，就可以載入看板娘：
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
來，執行網頁看下效果，看板娘直接就出來了有沒有！還支援對話、換模型、換衣服、截圖功能：
哎呀，突然感覺自己成為前端大佬了，好有成就感啊！
為什麼只用這一行程式碼，就實現了呢？
其實，我們剛剛是載入了專案作者在遠端伺服器上為我們提供的 JS 指令碼，這個指令碼會幫我們從遠端伺服器下載模型檔案。
這就意味著什麼呢？如果你想要自己定義載入哪些模型、以及對話的內容，就不是很方便，因為你無法登入到別人的伺服器去修改指令碼。
作者雖然也考慮到了這一點，但他的做法是搞了個 PHP 的後端專案，透過介面的方式來動態獲取要載入的模型列表和對話資訊。
我就給網站加個看板娘，你還讓我去搭一個後端？還讓我去搞 PHP？那我必然是不會這麼幹的！
下面魚皮教大家一種更簡單的方式，來自定義看板娘。
三、自定義
1、改造專案
首先，將上述開源專案完整下載到本地，用一個編輯器開啟。
找到 autoload.js 檔案，這是整個 Live2D 載入的入口，我們可以看到預設情況下是從遠端地址載入的模型列表和對話資訊。
其中，initWidget 方法非常關鍵，顧名思義，作用是初始化元件。點進去，可以看到載入元件的方法（loadWidget），這裡新建了一個模型物件。
再點進去，就進入了模型定義檔案，預設情況下，是透過網路請求從遠端伺服器上載入的模型列表配置。
那我們只要把這段邏輯改為從本地載入我自己寫的模型列表配置，就可以了呀~
沒錯，想到這裡，可能有些同學就直接去爆改這個原始檔了，但這是很不優雅的！
我們可以複製該模型定義檔案，得到一個新的 本地模型定義檔案 ，保證函式和大多數程式碼不變，只需要將部分程式碼修改為載入本地特定位置下的模型檔案和模型配置檔案。
這段程式碼大家暫時不用關注，文末我會分享原始碼
然後，修改載入元件的方法，根據開發者傳入的配置資訊，決定是否從本地載入模型，不就可以了麼？
做完這些之後，你需要重新打包一下修改完的檔案。由於專案用了 npm 進行管理，你需要先安裝 Node.js 服務，然後在專案內安裝依賴、再執行 build 打包，就得到了新的載入檔案（waifu-tips.js）。
2、效果展示
改造完畢，下面我們來使用一下改造後的專案吧~
先隨便寫一個小網站：
將模型檔案和模型列表配置檔案放到專案根目錄中：
大家可以自行修改模型列表配置檔案 model_list.json （陣列的每個元素都是一個模型、二維陣列的每個元素是不同的皮膚）：
最後，修改 autoload.js 載入檔案的配置，包括將 live2d 路徑改為當前路徑，修改初始化元件配置為本地（使用本地模型、指定模型檔案路徑、模型列表配置檔案的路徑），還可以自定義要使用的工具：
// 改為相對路徑
const live2d_path = "./";
// ...
// 初始化元件
initWidget({
isLocalModel: true, // 使用本地模型
waifuPath: live2d_path + "waifu-tips.json",
modelsPath: live2d_path + "model",
modelListPath: live2d_path + "model/model_list.json",
tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"]
});
大功告成，我們來雙擊檔案執行一下~
結果，執行失敗啦！不是哥們，你人呢？
為什麼模型沒載入出來呢，看下 F12 控制檯的報錯就知道了：
這是因為瀏覽器為了安全，限制了從本地檔案系統直接載入資源的能力。所以我們需要在本地啟動一個伺服器來執行網頁，這一步難不倒大家。可以直接用開發工具自帶的伺服器，點一下圖示就能正確執行了，也可以自己安裝一個 serve 工具。
這樣，我們的 Live2D 看板娘，就完美載入出來啦~
四、更多操作
接下來你還可以透過修改配置檔案（waifu-tips.json）來自定義對話，透過修改工具檔案 tools.js 來自定義點選模型旁邊圖示時執行的操作，透過加一些 CSS 程式碼來調整模型的位置等等。
改完後不要忘記重新 build 打包哦
還可以透過 F12 檢視到對應的元素，修改樣式檔案調整位置，比如：
<style>
#waifu {
right: 40px !important;
left: unset !important;
}
</style>
以上就是本期分享，我把魔改後的程式碼開源到了
不過代價就是模型檔案比較大，可能會消耗大量的頻寬和流量。我們也在糾結是否真的要給網站應用這個功能，歡迎大家給我們一些建議吧~