零基础学习GitHub桌面版-10给博客添加萌萌的live2d插件

文章目录

• 零基础学习GitHub桌面版-10给博客添加萌萌的live2d插件
• • 1 效果预览
  • 2 安装过程
  • • 2.1 安装总插件
    • 2.2 安装喜欢的具体模型
    • 2.3 移动模型地址
    • 2.4 配置使用
  • 3 成功

1 效果预览

我们希望在网站上显示一个好看的动漫形象，live2d这个库完美的解决了我们的需求。

单个效果预览：

所有动画效果：https://huaji8.top/post/live2d-plugin-2.0/

2 安装过程

2.1 安装总插件

在hexo的根目录下执行

npm install --save hexo-helper-live2d

2.2 安装喜欢的具体模型

安装完总插件后，可以安装喜欢的模型

所有动画效果可以在这个网站观看：https://huaji8.top/post/live2d-plugin-2.0/

选择一个自己喜欢的，比如tororo（白猫），下载具体的模型：

在根目录下执行：

npm install live2d-widget-model-tororo

（喜欢别的形象就把tororo换成别的名字）

2.3 移动模型地址

1. 从hexo的根目录的node_modules中找到刚刚安装的模型文件夹，比如我这里安装的是：live2d-widget-model-tororo ；复制这个文件夹。
2. 在hexo的根目录创建名为live2d_models的文件夹
3. 把之前找到的的模型文件夹从node_modules文件夹复制到live2d_models中

2.4 配置使用

在hexo根目录下的_config.yml中的最后面添加以下内容

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

3 成功

大功告成，部署博客即可。

hexo -d -g

效果如下：

原文链接：https://lookme.blog.csdn.net/article/details/88321308

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。