为网站加上live2d看板娘

上一篇我记录了怎么使用hexo+next搭建GitHub的个人网站，飞机票 (opens new window)

下载hexo-helper-live2d

github地址 (opens new window) 这是官网效果 (opens new window) 好了虽然上面已经给出官网地址 但是还是给你讲解一下 打开dos命令 切换到你博客目录执行 npm install --save hexo-helper-live2d 安装完了之后打开package.json会看到你的model 之后下载各种动画model https://github.com/xiazeyu/live2d-widget-models.git (opens new window) 我喜欢这样下载，在dos命令行切换到要下载的地方 git clone https://github.com/xiazeyu/live2d-widget-models.git 把packages文件夹下的所有文件复制到node_modules下 之后在博客的配置文件中添加

# Live2D
## https://github.com/EYHN/hexo-helper-live2d

live2d:
  enable: true #是否开启
  scriptFrom: local #默认
  pluginRootPath: live2dw/ #插件的站点上的根目录（相对路径）
  pluginJsPath: lib/ #脚本文件的相对与插件跟目录路径
  pluginModelPath: assets/ #模型文件对插件跟目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # jsdelivr CDN # unpkg CDN
  # scriptFrom: unpkg
  # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  
  tagMode: false #标签模式，是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    #scale: 1
    #hHeadPos: 0.5
    #vHeadPos: 0.618
    use: live2d-widget-model-haru

    #live2d-widget-model-shizuku
    #live2d-widget-model-haru

    # npm-module package name

    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
    # 你的自定义 url
  display:
    #superSample: 2
    position: right
    width: 150
    height: 300
    #hOffset: 0
    #vOffset: -20
  mobile:
    show: true
    #scale: 0.5
  #react:
    #opacityDefault: 0.7
    #opacityOnHover: 0.2

完了之后就

hexo g
hexo d

部署

看板娘终极进化，可换装

参考 (opens new window) 下载静态资源包https://github.com/stevenjoezhang/live2d-widget (opens new window) 解压复制文件夹到\themes\next\source下，并到目录下打开autoload.js修改live2d_path,为你命名的目录const live2d_path = "/live2d-widget-master/"; /themes/next/layout/_layout.swing文件下加入 <script src="/live2d-widget-master/autoload.js"></script> 修改waifu-tips.js中

$.ajax({
	url: "/live2d-widget-master/asteroids.js",
	dataType: "script",
	cache: true
});

把原来链接中的js保存到本地，

如果本文对您有所帮助，请打赏给我吧，我先送个你也红包往下看，你可以把扫到红包打赏个我哦！