杨世威

个人站

欢迎来到我的个人站~


博客添加live2d

为博客添加女朋友

下载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名外,其他的配置保持不变

  • 拷贝文件到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>

完成。

打赏一个呗

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦