Hexo博客美化

概述

最近无意中看到了两个很好玩的可以应用于hexo的“小插件”,分享一下。
先看下效果:

RevolverMaps

官网

这是一个能够实时统计访问你的站点或者博客的插件。

地球仪上的label表示访问站点的人都位置。
点击那个xxx visits，就会跳转到你的访问记录详情页了。

用法

如下图所示:

打开官网首页，在Get Started这里把这段js复制到你的网页上即可。

Hexo中使用

找到themes目录下你正在使用的主题对应的文件夹，放到你希望的位置的模版文件中即可。
比如我这里用的是huno主题，我希望在左边栏显示，那么就找到/themes/huno/layout/_partials/side-panel.ejs,在合适的地方插入复制来的脚本即可。

更多插件、更多配置

官网上还可以自定义一些配置和样式，比如以chart的形式来展示。或者修改大小等等。这里就不赘述了。

live2d

Github地址
Live2D是什么，相信绅士们都知道。用Live2D做个看板娘，放在个人博客上，是不是能让博客更hot一点呢？:D

安装

• 使用npm install --save hexo-helper-live2d安装插件

• 使用npm install 模型名称来下载模型

模型名称如下：

• live2d-widget-model-chitose
• live2d-widget-model-epsilon2_1
• live2d-widget-model-gf
• 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

配置

• 在hexo的根目录创建名为live2d_models的文件夹
• 把之前安装的模型文件夹从node_modules文件夹复制到live2d_models中
  比如我这里安装的是live2d-widget-model-wanko
  先使用npm install live2d-widget-model-wanko
  再从node_modules中找到这个文件夹，复制到live2d_models文件夹中
• 在hexo根目录下的_config.yml中的最后面添加以下内容:

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  scriptFrom: local # 默认
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  model:
    use: live2d-widget-model-wanko # npm-module package name
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 150
    height: 300
    position: right
    hOffset: 0
    vOffset: -20
  mobile:
    show: true
    scale: 0.5
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

这样一个萌萌哒"看板娘"就诞生了。