Hexo博客添加live2d卡通人物

最新推荐文章于 2025-03-16 22:44:52 发布

野猿新一

最新推荐文章于 2025-03-16 22:44:52 发布

阅读量5.7k

点赞数 2

本文链接：https://blog.csdn.net/mqdxiaoxiao/article/details/93793530

版权

搭建博客专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍如何在Hexo博客中添加Live2D卡通人物，包括安装hexo-helper-live2d插件、live2d-widget-model模型及配置方法，让您的博客更加生动有趣。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果

先看一下实现效果，右下角的小可爱就是添加的live2d卡通人物，而且她还会眨眼睛，头会随着鼠标的移动而转动

1.安装hexo-helper-live2d

$ npm install --save hexo-helper-live2d

2.安装live2d

其中<live2d-widget-model>替换成想要的，比如我安装的的是live2d-widget-model-wanko

当然，还有很多的model可供选择，参考

xiazeyu/live2d-widget-models

hexo live2d插件 2.0 !

$ npm install <live2d-widget-model>

安装live2d-widget-model-wanko

$ npm install live2d-widget-model-wanko

3.配置

在Hexo站点配置文件_config.yml，或者主题配置文件_config.yml中添加如下配置

至于每个配置项的作用看名字就很清楚，也可以修改值然后部署看下效果

更多详细的说明和配置，详见官网EYHN/hexo-helper-live2d

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

重新hexo d -g即可看到效果