在Hexo博客上添加萌萌哒Live 2D模型

前言：

给你的博客添加萌萌哒 Live 2D 模型 ，让别人看到你的博客时感觉眼前一亮！

---

安装插件

npm install --save hexo-helper-live2d

配置文件

在 Hexo的配置文件 _config.yml中添加如下配置，详细配置可以参考文档：

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

下载模型

下载模型，模型名称可以到这里参考，一些模型的预览可以在这里参考。

npm install live2d-widget-model-hijiki

配置文件

1. 在 Hexo根目录中新建文件夹 live2d_models
2. 在 node_modules文件夹中找到刚刚下载的 live2d模型，将其复制到 live2d_models中
   • live2d模型是一个类似于这样的文件夹：live2d-widget-model-hijiki
3. 编辑配置文件中的 model.use项，将其修改为 live2d_models文件夹中的模型文件夹的名称。

查看测试结果

在命令行（即Git Bash）运行以下命令，在 http://127.0.0.1:4000/ 中查看效果

hexo clean && hexo g && hexo s

新方案

在最新版本的 Hexo-NexT 主题中，已经支持了 Live 2D 模型小部件，通过简单的配置，可以直接使用该小部件。

1. 在站点根目录下创建并编辑 source/_data/head.njk ，向其中添加以下内容：

   // <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script> 已被墙
   <script src="/static/js/autoload.js"></script>

2. 然后取消 NexT 配置文件中 custom_file_path 部分下的 head 注释

   custom_file_path:
     head: source/_data/head.njk

• 注意：jsdelivr 在中国已被墙，建议改为本地路径，需要手动在本地配置 autoload.js 路径，如：/static/js/autoload.js

参考链接

1. live2d-widget
2. live2dDemo