liuliuya's blog
0%

hexo-theme-matery博客如何添加看板娘

发表于 更新于 分类于

有趣的技术

一,Live2D是什么？

2D的素材实现一定程度的3D效果

二,前期准备

检查博客主目录下的package.json是否有”hexo-helper-live2d”: “^3.0.3”,依赖，
有的话可以先卸载：npm uninstall hexo-helper-live2d
这是图片

三,安装依赖

1
>npm install --save hexo-helper-live2d

成功了之后可以看到当前目录的node_modules/下有个live2d-widget目录，这是动画的主配置：
这是图片

四,下载model文件

1
>npm install live2d-widget-model-shizuku

model名字可在live2d-widget-models中找到，也可点击live2d看板娘模型预览来选择你喜欢的模型进行安装。
安装完成可以在node_modules/下看到live2d-widget-model-shizuku文件夹
This is an picture

五,添加live2d看板娘到hexo

配置Hexo的主_config.yml或者使用的主题的_config.yml
添加以下代码到配置文件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
## Live2D看板娘
live2d:
  enable: true
  pluginModelPath: assets/
  model:
    #模板目录，在node_modules里
    use: live2d-widget-model-shizuku  
  display:
    position: right
    width: 300 
    height: 600
  mobile:
    # 在手机端显示
    show: false   
  rect:
    opacity:0.7

六,查看效果

在git bash上hexo g ,hexo s,用浏览器在本地打开即可看到效果。

七，参考链接

(52条消息) Hexo添加Live2D看板娘最新教程_飞萤乱入帘的博客-CSDN博客_hexo live2d