逛别人的博客网站的时候经常能看到他们页面上养着一只可爱的看板娘，咱也想养一只啊~

效果展示：

chtholly2

角色来自动画《末日三问》 中的珂朵莉。

模型来源 chtholly_kanban、中国珂学院。

将上面的chtholly_kanban克隆到本地。

方法一：使用hexo-helper-live2d插件

  1. 安装插件

    1
    npm install --save hexo-helper-live2d

  2. 在_config.yml中添加配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    # Live2D 看板娘
    ## https://github.com/EYHN/hexo-helper-live2d
    live2d:
      enable: true # 开启live2d
      # enable: false
      scriptFrom: local # 默认
      pluginRootPath: live2d/ # 插件在站点上的根目录(相对路径)
      pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
      pluginModelPath: assets/ # 模型文件相对与插件根目录路径
      tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
      debug: false # 调试, 是否在控制台输出日志
      model:
        use: chtholly # 模型文件夹的名字
      display:
        position: left #模型位置及大小
        width: 200
        height: 400
        hOffset: -30
        vOffset: -55
      mobile:
        show: true #是否在移动端显示
      react:
        opacity: 0.6 #透明度

  3. 在hexo根目录新建live2d_models文件夹,再到该目录下新建一个chtholly文件夹，然后把刚刚克隆到本地的仓库里面的chtholly文件夹下的assets文件夹内容复制到新建的live2d_models文件夹的chtholly文件夹下。到这一步其实就可以发布到hexo服务器了，不放心的话可以在本地预览再发布。

方法二：静态js调用

上面的方便是方便，但是有时各个插件之间会冲突且占空间。

chtholly_kanban仓库里面的source.html提供了静态js调用模式。

  1. 将chtholly文件夹复制到主题文件夹的source目录或者hexo根目录下，两者效果是一样的，都是为了使chtholly文件夹出现在网站发布之后的一级目录中，即本地的public文件夹下。

  2. 将source.html中的内容加入网页模板。

    前端这一块我也不熟，所以这个方法我尝试的时候还有一些问题。我是将source.html中的内容插入主题的layout.ejs文件的末尾，这样做只有网站的首页有效果，其它页面比如点进文章的页面是看不到的。

参考

Hexo-Live2d安装教程(自定义Live2d)

Hexo添加Live2D看板娘最新教程