Hexo+Next搭建个人博客（肥宅的快乐）

前言

最近将博客从 Jekyll 迁移到 Hexo，在迁移的过程中也遇到一些问题，下面就简单记录一下 Hexo+NexT+Github Pages 的搭建步骤。

在上一章，我们已经设置了多个网站统计分析，在本章，我们将为博客添加一个萌萌的 Live2D 看板娘。

Live2d是这几年比较火热的一门技术，是应用于游戏中的一种绘图渲染，近几年广泛应用于手游中（作为看板）。

很意外的，它也很适用于博客中。

虽然本身的功能不大，但是作为美化来说还是十分可爱的。

简单版

如果对于看板娘的要求不是特别高，只是需要放在那里卖个萌就行，建议用简易版的就ok。比较常见于各个博客的看板娘类型。

安装插件：

script

1	$ npm install --save hexo-helper-live2d

安装模型:

现有的 Live2D 看板娘模型：

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu # 本博客的看板娘
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

选择一个你喜欢的，运行下面命令：

script

1	$ npm install packagename

同时在站点配置文件中添加：

script

# 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-koharu # 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: 200 # 看板娘宽度
    height: 450 # 看板娘高度
    hOffset: 10 # 看板娘向左/右偏移量
    vOffset: 150 # 看板娘向上偏移量
  mobile:
    show: false # 手机中是否展示

高级版

高级版对比初级版更多了换装、换人、飞机大战小游戏等功能，但由于只能置于页面最下方，会挡住很多按钮，故本博客没有用。

使用 CDN

高级版看板娘免安装可以直接使用 CDN，我们依然使用 Hexo 的注入功能来管理插件

首先，打开主题配置文件，在最底部添加

script

1
2
3

# live2d 看板娘
live2d:
  enabled: true

第二步，打开 hexo/scripts/plugins.js，在 head 注入点注入 js 文件

hexo.extend.filter.register('theme_inject', function (injects) {
  .
  .
  .

  if (hexo.theme.config.live2d.enabled) {
    injects.head.raw('live2d.js', '<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>', {}, {cache: true});
  }

  .
  .
  .
});

下载到本地

当然你也可以下载到本地来使用，在 Hexo 根目录输入如下命令：

script

1	$ git clone https://github.com/stevenjoezhang/live2d-widget.git source/js/live2d/

接下来就和上面使用 CDN 一样了，只不过要注意注入时 script 标签的 src 属性要换成 /js/live2d/autoload.js

如果想要定制对话框以及样式的话可以改下面这些文件

1
2
3

hexo/source/js/live2d/waifu-tips.js 包含了按钮和对话框的逻辑；
hexo/source/js/live2d/waifu-tips.json 中定义了触发条件（selector，CSS 选择器）和触发时显示的文字（text）；
hexo/source/js/live2d/waifu.css 是看板娘的样式表。