为了账号安全,请及时绑定邮箱和手机立即绑定

Hexo博客美化

2018.06.21 23:38 6255浏览

概述

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

RevolverMaps

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

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

用法

如下图所示:
useage
打开官网首页,在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

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

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

2人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消