为博客添加女朋友
下载live2d models 库
github地址
下载live2d库,查看预览图
选择一个models,记住名字,下面的models名字均以z16为例,选择其他名字替换z16即可
在live2d-widget-models目录下,npm install live2d-widget-model-z16
生成静态的文件
npm install hexo-cli -g
hexo init blog
cd blog
npm install
- 进入blog目录,安装hexo-helper-live2d,链接
npm install --save hexo-helper-live2d
如果不成功：yarn add hexo-helper-live2d - 修改_config.xml
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
use: z16
display:
position: right
width: 150
height: 300
mobile:
show: true
除了model.use的名字,根据选择的model名外,其他的配置保持不变,参考如下model选择添加到配置中
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
目前github仓库支持这些动态小图,按自己喜好添加
- 拷贝文件到hexo中
cd blog
mkdir live2d_models && cd live2d_models && mkdir z16
#将live2d-widget-models目录下live2d-widget-model-z16/assets/下的文件拷贝到 blog/live2d_models/z16下
将目录拷贝到blog的live2d_models下后执行hexo serve查看是否已经有了z16
在blog目录,执行hexo deploy
生成的静态文件在blog/public/live2d下
引用文件在index.html中
- 静态文件导入jeklly
cp blog/public/live2d jeklly-blog的根目录
将hexo的index.html的引用文件添加到jeklly的footer.html中
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script>
<script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/z16.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"log":false});</script>
完成。
- 修改透明度 进入live2dw-lib-L2Dwidget.min.js 修改pacityDefault:1参数,例如默认的设置是pacityDefault:.7
