在自己的网站中添加看板娘

关于给页面添加 看板娘 踩的坑

经常在其他大佬的博客上看到看板娘，然后搞了好几天才明白一点点（终究还是太菜 -.-）

其实有好多大佬都发布了自己的看板娘源码，好多种版本，但其实还是用 live2d 做出来的。

这是很早就开始搞看板娘的大佬，看过好多博客教程也都是参照她的来的 ==》给博客添加能动的看板娘(Live2D)-关于模型的二三事

自己最开始接触到的是 引入css、js、json文件，就能显示在网页上的版本，但是都是人家固定的样式、功能和提示语，然后就想搞一下操作性高一点的。

然后

就通过 恶魔萝莉控 大佬的博客，知道了hexo版的看板娘。正好hexo博客也刚刚搭建好，就去尝试了一下。

大概显示出来就是这个样子

但是好像只有样式，没有功能之类的（但我还是舔着脸放到了博客上，嘎嘎嘎）

再然后

就又去找其他版本的，就有了解到了 保罗的小宇宙 这个大佬写的版本，他主要是用到 Typecho 来使用的，但是也可以取出基础文件放到其他项目中。就像这样
又然而，他可操控的功能也没有多少，而且模板只有他自己做好即几种，必须去下载好之后取出来，放到项目中改好目录才可以用。

然后的然后

就知道了FGHRSH 这个大佬的版本，很简单粗暴，人物模型的话也是通过 live2d 去制作，但是他在数据中添加了很多，基本上常见的看板娘模型都有，而且皮肤也很多，可操控的功能、提示之类的也很多，直接在js中更改就可以。就像这样==》

终于从坑里跳了出来

搞了这么多版，搜了那么多资料，试了那么多次，终于找到一个自我感觉很奈斯的版本。（其实还是不明白底层，但是这个已经很满足自己想要的了）

然后的然后的然后 记录一下这三个版本的用法

HEXO版

这个版本的看板娘很好操作，首先先在自己的hexo项目中安装

npm install --save hexo-helper-live2d

然后再把相应的配置代码粘贴到项目根目录下的配置文件中
配置代码↓

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-haruto
  display:
    position: