給網站添加live2d看板娘

參考文獻：

1. stevenjoezhang/live2d-widget: 把萌萌噠的看板娘抱回家 (ノ≧?≦)ノ | Live2D widget for web platform
2. Eikanya/Live2d-model: Live2d model collection
3. zenghongtu/live2d-model-assets

前言

網站環境如下，文章也主要記錄在這個環境下的配置過程。

• wordpress搭建
• Sakurairo主題

網站引入看板娘需要兩個東西：

• ?live2d?組件：stevenjoezhang/live2d-widget: 把萌萌噠的看板娘抱回家 (ノ≧?≦)ノ | Live2D widget for web platform

• ?live2d?模型：

  • Eikanya/Live2d-model: Live2d model collection
  • zenghongtu/live2d-model-assets

引入看板娘

引入方式有兩種，一種是將資源放在網上通過網絡引入，第二種是將資源放在本地。

網絡引入

最簡單的方式是一行代碼：

<script src="https://fastly.jsdelivr.net/npm/live2d-widgets@1.0.0-rc.4/dist/autoload.js"></script>

官方教程提示需要放在html 頁面的 head 或 body 中。經測試在Sakurairo主題中在iro主題設置->全局設置->頁尾設置->頁尾附加代碼?中添加上述代碼即可。

可能的問題

如果添加后刷新網頁，沒有看板娘。可能的原因如下：

• 看板娘模型加載需要一定時間可以等待半分鐘。

• cdn域名無法訪問

  上面的js代碼使用了基于jsdelivr?的cdn加速，但是jsdelivr?的部分加速域名被墻了，國內可能無法訪問。可以直接在瀏覽器網址欄，輸入https://fastly.jsdelivr.net/npm/live2d-widgets@1.0.0-rc.4/dist/autoload.js?，如果不能訪問，就說明被墻了。

  如果被墻可以更換其他加速域名，只需替換網址中的fastly.jsdelivr.net?即可。其他可用域名可參考博客：jsdelivr npm 國內加速CDN節點

其實我們還可以直接把資源放在本地，好處是：

• 不會有網絡問題
• 可以自己添加、刪去模型
• 可以深度定制模型，如定制看板娘聊天語句、自定義看板娘右側功能按鈕等。

本地引入

如果想要深度定制需要參考stevenjoezhang/live2d-widget: 把萌萌噠的看板娘抱回家 (ノ≧?≦)ノ | Live2D widget for web platform 官方文檔的開發章節重新進行build。

如果只需要本地引入，增加或刪減模型等功能，是不需要進行本地構建的。

將倉庫上傳到wordpress的根目錄：

?

確保https://XXXX.com/live2d-widget/dist/autoload.js?可以正常訪問。

然后修改live2d-widget/dist/autoload.js?文件（8-9行）。修改live2d_path?為自己的網址路徑。

//const live2d_path = 'https://fastly.jsdelivr.net/npm/live2d-widgets@1.0.0-rc.3/dist/';
const live2d_path = 'https://XXXX.com/live2d-widget/dist/';

最后在主題的頁尾附加代碼中添加下面的代碼即可：

<!-- Live2D看板娘 -->
<script type="text/javascript" src="https://XXXX.com/live2d-widget/dist/autoload.js"></script>

注意：XXXX.com請替換成自己的域名

增加模型

需要修改文件live2d-widget/dist/waifu-tips.json?，在文件最后仿照前面的格式，即可添加模型。示例如下：

 {"name": "TEST","paths": ["https://fastly.jsdelivr.net/gh/Eikanya/Live2d-model@v1.0.0/%E5%B4%A9%E5%9D%8F%E5%AD%A6%E5%9B%AD2/BYC/model.json"],"message": "正在測試"}, {"name": "TEST","paths": ["https://raw.githubusercontent.com/zenghongtu/live2d-model-assets/master/assets/moc3/lafei/lafei.model3.json"],"message": "正在測試"}

比較關鍵的是paths?這個需要是模型model.json?或model3.json?路徑。

其他可用模型可參考：

1. Eikanya/Live2d-model: Live2d model collection
2. zenghongtu/live2d-model-assets

使用jsdelivr?給模型加速

使用如下格式即可加速

https://cdn.jsdelivr.net/gh/用戶名/倉庫名@版本號/文件路徑/文件名

或省略版本號（版本號就是倉庫的tag）

https://cdn.jsdelivr.net/gh/lzxjack/cdn/json/emoji.json

?