为网站添加live2D

安装插件

hexo-helper-live2d

1	npm install --save hexo-helper-live2d

下载模型

（这里用一个白色的猫猫）

点击查看

1	npm install live2d-widget-model-tororo

其他模型（目前该插件可直接安装的）

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

在hexo的配置文件中添加以下内容

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-tororo #这里改为你模型的名字
  display:
    position: right  #left放左，right放右
    width: 180
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

这段配置是用于设置Live2D插件的参数。让我为您解释每个参数的含义：



- `enable`：设置为 `true` 表示启用Live2D插件，允许在网站上显示Live2D模型。
- `scriptFrom`：设置为 `local` 表示从本地加载插件的JavaScript文件。
- `pluginRootPath`：Live2D插件根目录的路径。在这个示例中，设置为 `live2dw/`。
- `pluginJsPath`：插件JavaScript文件存放的路径。在这个示例中，设置为 `lib/`。
- `pluginModelPath`：Live2D模型文件存放的路径。在这个示例中，设置为 `assets/`。
- `tagMode`：设置为 `false` 表示不以标签形式展示Live2D模型。
- `debug`：设置为 `false` 表示关闭调试模式。

接下来是具体的模型相关设置：

- `model.use`：指定使用的Live2D模型的名称。在这个示例中，模型名字被设置为 `live2d-widget-model-tororo`，您可以更改为您想要使用的模型的名字。
- `display.position`：指定Live2D模型在网页中的位置，可以设置为 `left` 或 `right`。
- `display.width`：指定Live2D模型的宽度。
- `display.height`：指定Live2D模型的高度。

接下来是移动设备的显示设置：

- `mobile.show`：设置为 `true` 表示在移动设备上显示Live2D模型。

最后是交互相关设置：

- `react.opacity`：指定Live2D模型的透明度。

请注意，这些参数可以根据您的需求进行调整和修改，以适应您的网站设计和Live2D模型的要求。

希望这些解释能对您有所帮助！如果您有任何其他问题，请随时提问。

尝试导入其他live2d模型

但是导入不显示模型

可能是插件不兼容吧

以后再仔细研究一下

其他模型（我导入其他模型没有成功过）

Cubism Modeler Sample Models（Cubism模型示例）：这是Live2D官方提供的一些免费的模型示例，包括动漫角色、动物和虚拟偶像等。您可以在Live2D官方网站的下载页面找到这些模型：https://www.live2d.com/en/download/sample-data/

Facerig Live2D模型：Facerig是一个非常受欢迎的虚拟角色扮演软件，它支持Live2D模型。您可以在Facerig官方网站或Steam商店中找到各种各样的Live2D模型：https://facerig.com/

Booth（BOOTH）：Booth是一个在线创作和交易平台，您可以在这里找到许多独立插画师和模型师创作的Live2D模型。访问Booth网站并搜索“Live2D”或特定的角色名字，您可以找到许多可购买或免费下载的Live2D模型：https://booth.pm/

DeviantArt：DeviantArt是一个知名的艺术创作社交平台，许多艺术家在这里分享他们的作品，包括Live2D模型。您可以在DeviantArt上搜索“Live2D”或特定的角色名字，找到一些创作者提供的Live2D模型下载：https://www.deviantart.com/

下面这个方法也没有用

Hexo框架搭建的网站可以添加Live2D模型，让您的网站更加生动和有趣。Live2D是一种2D图像的实时运动技术，可以将静态的插图或卡通人物赋予动态效果。您可以按照以下步骤在Hexo网站中添加Live2D模型：

在Hexo网站的根目录下，创建一个名为 live2d 的文件夹。
将Live2D模型的相关文件（通常包括 .json、.js、.png 等文件）放置在 live2d 文件夹中。您可以从Live2D官方网站或其他资源站点下载Live2D模型。
在Hexo网站中添加引用Live2D的代码。您可以在Hexo主题的模板文件中找到适合的位置，一般是在 <body> 标签的结尾处。
1
2
<script src="/live2d/live2d.js"></script>
<script src="/live2d/live2d_init.js"></script>
修改 live2d_init.js 文件以配置Live2D模型的显示参数。您可以根据Live2D模型的文件名和其他参数进行相应的设置。
1
loadlive2d("live2d", "/live2d/model.json");
其中，"live2d" 是存放Live2D模型文件的文件夹名，"/live2d/model.json" 是Live2D模型文件的路径和文件名。
保存文件并重新生成Hexo网站。
打开您的Hexo网站，就应该能看到Live2D模型已成功添加到网站中了。