Hexo添加Live2D看板娘最新教程

前言

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

介绍

Live2D

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

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

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

live2d官方网站就是live2d.com，里面提供了live2d开发和编辑软件（如Live2D Cubism editor和Live2D Euclideditor），还有开发使用教程等，对相关制作感兴趣的可以看看。
更详细的介绍请看二次元live2d看板娘中的web前端技术

看板娘

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

添加Live2D看板娘

准备工作

• 检查博客主目录下的package.json是否有"hexo-helper-live2d": "^3.0.3",依赖：
  
  有的话可以先卸载：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看板娘模型预览来选择你喜欢的模型进行安装。
  安装完成可以在node_modules/下看到live2d-widget-model-shizuku文件夹
  

添加live2d看板娘到hexo

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

  ## 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服务器上，即可在外网查看了。可在我的hexo博客预览，只不过我现在用的github作服务器，访问速度有点慢。
没有安装过hexo的同学，可参见教程hexo最全搭建教程，安装过程中的一些错误我做了记录，请见使用Hexo搭建博客遇到的问题及解决。

结束语

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

参考

• 二次元live2d看板娘效果中的web前端技术
• 博客园添加live2d看板娘
• Hexo添加Live2D看板娘+模型预览