live2d-widget是一個(gè)可以在網(wǎng)頁中添加可愛的看板娘的網(wǎng)頁插件。

live2d-widget特性：

在網(wǎng)頁中添加Live2D看板娘。兼容PJAX，支持無刷新加載。

警告：本項(xiàng)目使用了大量 ES6 語法，不支持 IE 11 等老舊瀏覽器。

你也可以在允許的范圍內(nèi)進(jìn)行二次開發(fā)，這里有一些示例

demo.html ，展現(xiàn)基礎(chǔ)效果

login.html ，仿NPM的登陸界面

網(wǎng)頁看板娘簡(jiǎn)短安裝：

只需要把下面3行代碼放到頁面中，即可實(shí)現(xiàn)網(wǎng)頁看板娘效果。（格式自己進(jìn)行添加下即可）

script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"

link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"

script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"

live2d-widget詳細(xì)安裝說明：

依賴Dependencies

本插件需要Font Awesome(v4 或 v5)圖標(biāo)支持，請(qǐng)確保相關(guān)樣式表已在頁面中加載。以Font Awesome v4 為例，請(qǐng)?jiān)?中加入：

link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"

否則圖標(biāo)將無法正常顯示。（如果網(wǎng)頁中已經(jīng)加載了任何版本的Font Awesome，就不要重復(fù)加載了）

使用Usage

將這一行代碼加入或，即可展現(xiàn)出效果：

script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"

如果網(wǎng)站啟用了PJAX，由于看板娘不必每頁刷新，因此要注意將相關(guān)腳本放到PJAX刷新區(qū)域之外。

換句話說，如果你是小白，或者只需要最基礎(chǔ)的功能，就只用把這一行代碼，連同前面加載Font Awesome的一行代碼，一起放到html的中即可。

對(duì)于用各種模版引擎（例如 Nunjucks，Jinja 或者 PHP）生成的頁面，也要自行修改，方法類似，只是可能略為麻煩。以Hexo為例，需要在主題相關(guān)的ejs或njk模版中正確配置路徑，才可以加載。

但是！我們強(qiáng)烈推薦自己進(jìn)行配置，否則很多功能是不完整的，并且可能產(chǎn)生問題！

如果你有興趣自己折騰的話，請(qǐng)看下面的詳細(xì)說明。

Using CDN

要自定義有關(guān)內(nèi)容，可以把這個(gè)倉(cāng)庫Fork一份，然后進(jìn)行修改。這時(shí)，使用方法對(duì)應(yīng)地變?yōu)?/p>

script src="https://cdn.jsdelivr.net/gh/username/live2d-widget@latest/autoload.js"

將此處的username 替換為你的 GitHub 用戶名。為了使 CDN 的內(nèi)容正常刷新，需要?jiǎng)?chuàng)建新的git tag 并推送至GitHub倉(cāng)庫中，否則此處的 @latest 仍然指向更新前的文件。此外CDN本身存在緩存，因此改動(dòng)可能需要一定的時(shí)間生效。

Self-host

你也可以直接把這些文件放到服務(wù)器上，而不是通過CDN加載。

如果你能夠通過ssh訪問你的主機(jī)，請(qǐng)把整個(gè)倉(cāng)庫克隆到服務(wù)器上。執(zhí)行：

cd /path/to/your/webroot

# Clone this repository

git clone https://github.com/stevenjoezhang/live2d-widget.git

如果你的主機(jī)無法用ssh連接（例如一般的虛擬主機(jī)），請(qǐng)選擇 Download ZIP，然后通過ftp等方式上傳到主機(jī)上，再解壓到網(wǎng)站的目錄下。

如果你是通過 Hexo 等工具部署的靜態(tài)博客，請(qǐng)?jiān)诓┛驮次募?source）目錄下，執(zhí)行前述的 git clone 命令。重新部署博客時(shí)，相關(guān)文件就會(huì)自動(dòng)上傳到對(duì)應(yīng)的路徑下。為了避免這些文件被 Hexo 插件錯(cuò)誤地修改，可能需要設(shè)置 skip_render。

這樣，整個(gè)項(xiàng)目就可以通過你的服務(wù)器 IP 或者域名從公網(wǎng)訪問了。不妨試試能否正常地通過瀏覽器打開autoload.js 和 live2d.min.js 等文件，并確認(rèn)這些文件的內(nèi)容是完整和正確的。

一切正常的話，接下來修改一些配置就行了。（需要通過服務(wù)器上的文本編輯器修改；你也可以先在本地完成這一步驟，再上傳到服務(wù)器上）

修改autoload.js中的常量live2d_path為live2d-widget這一目錄的URL。比如說，如果你能夠通過

https://example.com/path/to/live2d-widget/live2d.min.js

訪問到 live2d.min.js，那么就把 live2d_path 的值修改為

https://example.com/path/to/live2d-widget/

路徑末尾的 / 一定要加上。具體可以參考 autoload.js 內(nèi)的注釋。

完成后，在你要添加看板娘的界面加入

script src="https://example.com/path/to/live2d-widget/autoload.js"

就可以加載了。

后端API

initWidget方法接受名為apiPath和cdnPath的參數(shù)，兩者設(shè)置其中一項(xiàng)即可。其中apiPath為后端API的 URL，可以自行搭建，并增加模型（需要修改的內(nèi)容比較多，此處不再贅述）。而cdnPath則是通過 jsDelivr這樣的CDN服務(wù)加載資源，更加穩(wěn)定。

目錄結(jié)構(gòu)Files

waifu-tips.js 包含了按鈕和對(duì)話框的邏輯；

waifu-tips.json 中定義了觸發(fā)條件（selector，CSS 選擇器）和觸發(fā)時(shí)顯示的文字（text）；

waifu.css 是看板娘的樣式表。

源文件是 Hexo的NexT主題有效的，為了適用于你自己的網(wǎng)頁，可能需要自行修改，或增加新內(nèi)容。

警告：作者不對(duì)包括但不限于waifu-tips.js和waifu-tips.json文件中的內(nèi)容負(fù)責(zé)，請(qǐng)自行確保它們是合適的。