hexo中next主題添加里lived看板娘(會說話,會換裝)
本人部落格的效果:mmmmmm.me
沒耐心的請直接看最下面----------->>>>>>終極進化~~~~~~~~本文旨在記錄本人的安裝過程。
最初的體驗:
首先,hexo的官方是支援看板孃的,已經封裝好了外掛,但是隻是模型,不能說話,換衣服什麼的更別說了,而且任務較少。
安裝模組:
npm install --save hexo-helper-live2d
請向Hexo的 _config.yml
檔案或主題的 _config.yml
檔案中新增配置.
示例:
live2d: enable: true scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false debug: false model: use: live2d-widget-model-wanko display: position: right width: 150 height: 300 mobile: show: true
發現新大陸:
上面的模型太少了。隨後發現了下面講的更多優質的模型。
嫌麻煩的,我這把資源貼出來:https://github.com/summerscar/live2dDemo(github地址,講的很詳細,將assets中的模型克隆到自己建的)具體:打包下載下來,解壓後在/live2dDemo-master/assets/
中找到喜歡的模型,直接把模型所在的資料夾拖入到部落格根目錄中的live2d_models(自己新建的)
裡,再修改_config.yml
裡的 model.use
即可(改為live2d_models中的模型名字就行
)。
終極進化:
看到別人部落格的看板娘能說話,能換衣服的,自己有強迫症找了好久,才找到資源。(以後沒有的資源可以去github搜搜,很多東西百度是搜尋不到的。)
做法:寫得很清楚了,改變autoload.js中的路徑,autoload.js中的註釋寫得很清楚,但是關於路徑問題並沒有寫清除,這裡的絕對地址指的是將資源打包放到hexo/theme/next/source中,這裡的hexo/theme/next/source也就是根目錄(/),修改路徑的時候假如把css,js,等檔案放在了source 中的live目錄下,那麼修改路徑就是/live/xxx.js,autoload.js的最後一個函式initWidget("/live/", "https://api.fghrsh.net/live2d");中的第二個引數不要變,就是人家的一個api,萬一哪天掛了呢?如果想成為自己的要拷貝到自己的伺服器中,並搭建php環境,api github地址:
<script src="/path/to/autolload.js"></script>
上面這句script放在/themes/next/layout/_layout.swing中,autoload.js路徑同上修改。
注意:如果先玩過上面兩個,第三個可能不顯示,把上面——config.yml中的配置改為
live2d:
enable: true
也可能是快取的問題。
最後,不知道是我的網速還是為什麼,或者是快取?hexo -g -d 後等一段時間才會把自己的改變同步到網頁上。
最後的最後,已經將api部署到了自己的伺服器上,玩意那天伺服器到期了,或者等很多種可能,我還有前兩種方法,但是:
這給以後的自己一個線索(以後估計都不感興趣了,到時候再說)
通過閱讀了github上坐著的原始碼,以及自己的總結,waifu-tips.js中的
loadlive2d("live2d", apiURL + "/get/?id=" + modelId + "-" + modelTexturesId, console.log("live2d", "模型 " + modelId + "-" + modelTexturesId + " 載入完成")); |
第二個引數,也就是autoload.js中的足後一個配置的第二個引數,自己以後可以自行修改,就是可以換成本地的一個model.json
,但是可能會牽扯到其他的js的改動,以後估計就不感興趣了。