hexo右下角弄一个live2d的卡通动画小人
首先貼出官網代碼
官網地址配置:https://www.npmjs.com/package/hexo-helper-live2d
按如下步驟執行
1?? 首先檢查博客主目錄下面的 package.json里是否有
"hexo-helper-live2d": "^3.0.3",依賴,有的話可以先卸載
使用命令:npm uninstall hexo-helper-live2d
之后再安裝:npm install --save hexo-helper-live2d
注意:命令都是在你的博客主目錄執行
我的博客目錄結構:d:/github/blog
安裝完成之后在package.json會看到安裝的model
package.json依賴
此時再去 node_moduels目錄下,可以看到有如下文件夾,這些都是動畫主配置
node_modules目錄
2??下載各種動畫model:
地址:https://github.com/xiazeyu/live2d-widget-models.git
?
3??下載好之后將packages里的所有動畫模板拷貝到博客的node_modules目錄里
?
packages目錄
4??配置博客站點配置文件,_config.yml
live2d:enable: truepluginModelPath: assets/model:use: live2d-widget-model-epsilon2_1 #模板目錄,在node_modules里display:position: rightwidth: 150 height: 300mobile:show: false #是否在手機進行顯示5??開始部署
當使用hexo clean或者 hexo g命令的時候,這時候就可以看到如下日志了
構建日志
INFO HEXO-HELPER-LIVE2D: Loaded model from npm-module(1), live2d-widget-model-epsilon2_1@1.0.5 from 'D:\github\blog\node_modules\live2d-widget-model-epsilon2_1\assets'
說明已經加載到了配置的動畫模板,到此就完成了。
?
具體效果:appleyuchi.github.io
?
轉載自:
https://www.jianshu.com/p/3a6342e16e57
?
上述轉載內容在hexo的landfarz主題下面通過。
總結
以上是生活随笔為你收集整理的hexo右下角弄一个live2d的卡通动画小人的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: hexo的landfarz主题侧栏靠左
- 下一篇: css、js控制html标签的属性和内容