这篇文章上次修改于 326 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

前言

今天来给博客添加一个 Live2D 看板娘。在网上看了一些教程，不过 hexo 更新之后更简单，以前的一些教程有些过时了，所以想写一篇更新的教程。

介绍

Live2D

Live2D 是一种应用于电子游戏的绘图渲染技术，由日本 Cybernoids 公司开发，通过一系列的连续图像和人物建模来生成一种类似二维图像的三维模型，换句话说就是 2D 的素材实现一定程度的 3D 效果，但只能是一定程度 3D，因为 Live 2D 人物无法大幅度转身。

很多知名的动漫都是 Live2D 游戏改编的或者反过来的，例如：《我的妹妹不可能有那么可爱》、《我的朋友很少》、《樱花庄的宠物女孩》等。

俺妹

《路人女主的养成方法》中安艺伦也一行人制作的游戏就是 Live2D 游戏，当然，这部轻小说本身也被做成了 Live2D 游戏。

路人女主加滕惠

live2d 官方网站就是[live2d.com][]，里面提供了 live2d 开发和编辑软件（如 Live2D Cubism editor 和 Live2D Euclideditor），还有开发使用教程等，对相关制作感兴趣的可以看看。

看板娘

看板娘是一种职业和习惯称呼，也是 ACGN 次文化中的萌属性之一。简而言之就是小店的女服务生，也有“吸引顾客，招揽生意，提高人气”等作用类似品牌形象代言人的含义。

在这里插入图片描述

添加 Live2D 看板娘

准备工作
  • 检查博客主目录下的package.json是否有"hexo-helper-live2d": "^3.1.0",依赖：
    在这里插入图片描述
    有的话可以先卸载：npm uninstall hexo-helper-live2d
安装依赖
  • 安装依赖：
    npm install --save hexo-helper-live2d
    安装过程中可能遇到一些依赖性问题，按提示做就行
    在这里插入图片描述
    遇到这种就运行npm audit fix，如果还不成功，会提示你用npm audit fix --force，一般这个时候就成功了。
    成功了之后可以看到当前目录的node_modules/下有个live2d-widget目录，这是动画的主配置：
    在这里插入图片描述
    这个时候是没有模型文件的，所以下一步是下载模型文件
下载 model 文件
  • 下载模型文件：
    模型文件可直接用 npm 安装：如下
    npm install live2d-widget-model-shizuku
    model 名字可在[live2d-widget-models][]中找到，也可点击[live2d 看板娘模型预览][live2d]来选择你喜欢的模型进行安装。
    安装完成可以在node_modules/下看到live2d-widget-model-shizuku文件夹
    在这里插入图片描述
添加 live2d 看板娘到 hexo

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    ## 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
查看效果

使用hexo g生成文件，使用hexo server即可在本地查看效果：

在这里插入图片描述
打开浏览器访问：http://localhost:4000即可看到效果：

在这里插入图片描述

发布

在本地找到满意的效果后，使用hexo d将其发布到你的 hexo 服务器上，即可在外网查看了。

结束语

那么到这里，添加 Live2d 看板娘教程就结束了。
如果对你有帮助，请点个赞再走，谢谢。