Hexo助手：轻松集成Live2D看板娘插件安装与配置指南

Hexo助手：轻松集成Live2D看板娘插件安装与配置指南

【免费下载链接】hexo-helper-live2d Add the Sseexxyyy live2d to your hexo! 项目地址: https://gitcode.com/gh_mirrors/he/hexo-helper-live2d

项目基础介绍与主要编程语言

Hexo助手：hexo-helper-live2d 是一款专为基于Hexo搭建的博客设计的插件，它使得你能将可爱的Live2D角色——看板娘，嵌入到你的网站中。项目使用JavaScript作为主要编程语言，依赖于WebGL技术来呈现生动的2D角色交互界面。

关键技术和框架

• Live2D Cubism SDK: 负责Live2D模型的渲染与动画。
• Hexo: 静态站点生成器，用于构建博客。
• GitHub Pages (可选): 可以部署Hexo博客的地方之一，利用其托管服务。

安装和配置的准备工作及详细步骤

准备工作

确保你已具备以下环境：

1. Node.js: Hexo运行依赖Node.js，推荐最新稳定版。
2. Git: 用于克隆项目代码。
3. Hexo: 如果你尚未搭建Hexo博客，请先安装并初始化一个Hexo站点。

步骤一：安装插件

打开命令行工具，进入你的Hexo博客根目录，执行以下命令来安装hexo-helper-live2d插件：

npm install --save hexo-helper-live2d

或者，如果你偏好使用Yarn管理包，可以使用：

yarn add hexo-helper-live2d

这会将插件下载至你的Hexo博客的node_modules目录。

步骤二：配置插件

接下来，你需要在Hexo的全局配置文件_config.yml或主题的配置文件中添加Live2D的配置。如果你没有自定义主题，编辑_config.yml即可。添加如下内容：

live2d:
  enable: true        # 开启插件
  scriptFrom: local   # 脚本来源，这里以本地为例
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false       # 是否仅替换live2d标签，不注入所有页面
  model:
    use: live2d-widget-model-wanko   # 示例模型名称
  display:
    position: right   # 显示位置
    width: 150        # 宽度
    height: 300       # 高度

步骤三：选择和配置模型

1. 内置模型: 默认配置通常可用，如果需要更换模型，参照插件文档中的模型获取方式，例如通过npm安装其他模型包。

   npm install --save live2d-widget-model-chitose
   

   然后在配置中更改model.use的值。

2. 自定义设置: 模型的具体显示效果，如大小、位置等，也可以在display部分进行调整。

步骤四：启用Live2D

默认情况下，插入模型的代码会被自动加入到每个页面的底部。如果你需要手动控制出现页面，可在相应布局文件(layout/layout.ejs或layout/_layout.swig)的关闭body标签前添加[[ live2d() ]]（Swig模板）或<%- live2d() %>（EJS模板）。

完成上述步骤后，重新生成并部署你的Hexo博客，就能见到活泼的看板娘了。

hexo clean && hexo generate && hexo deploy

现在，你已经成功集成并配置了Hexo的Live2D插件，享受更加个性化的博客体验吧！

---

以上就是针对新手级别的Hexo博客集成Live2D看板娘的详细教程。如果有任何问题，记得查看项目的GitHub仓库获取最新信息和支持。祝你博客个性化之路顺畅！

【免费下载链接】hexo-helper-live2d Add the Sseexxyyy live2d to your hexo! 项目地址: https://gitcode.com/gh_mirrors/he/hexo-helper-live2d