[JavaScript知识库]【原创】给博客加个看板娘

原文地址：【原创】给博客加个看板娘 – 浅浅淡淡

给博客加个看板娘

无脑水平

首先hexo官方是支持看板娘的，但是只有模型

无脑开始

安装模块

npm install --save hexo-helper-live2d

**注意：命令要在当前主目录执行

在主配置文件写下内容

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr 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:
    use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true # 手机中是否展示

进阶

继续下载各种动画：GitHub - xiazeyu/live2d-widget-models: The model library for live2d-widget.js

》》》模型预览《《《

下载完成后解压在node_modules目录里

然后在配置文件里引用就行了

进阶2

也可以使用别的大神的项目，也就是我现在用的

使用前执行下面命令：卸载官方的live2d

npm uninstall hexo-helper-live2d

并把配置文件里的代码删除

Butterfly主题

首先下载并解压在\themes\butterfly\source把文件夹名改为live2d-widget

修改当前文件夹内的autoload.js文件把：

const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";

改为：

const live2d_path = "/live2d-widget/";

最后来到Butterfly主题配置文件进行引用

打开配置文件搜索inject: 把下列代码插入bottom后

-

配置一下来看看效果

修位置及文本内容

1. 位置：打开waifu.css文件找到#waifu修改位置参数，，，，
   本页面位置参考:

   #waifu {
   bottom: -1000px;
   right: 1%;
   line-height: 0;
   position: fixed;
   transform: translateY(3px);
   transition: transform .3s ease-in-out, bottom 3s ease-in-out;
   z-index: 1;
   }

   图标位置：#waifu-tool
   参考：

   #waifu-tool {
   color: #aaa;
   opacity: 0;
   position: absolute;
   right: 10%;
   top: 70px;
   transition: opacity 1s;
   }

2. 文本内容修改json文件即可

好啦快去嘿嘿嘿老婆吧

next主题

首先下载并解压在\themes\butterfly\source把文件夹名改为live2d-widget

修改当前文件夹内的autoload.js文件把：

const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";

改为：

const live2d_path = "/live2d-widget/";

在/themes/next/layout/_layout.swing中,新增如下内容：

在主配置文件增加如下内容：

live2d:
 enable: true

（完）