Hexo博客美化
标签:
JavaScript
概述
最近无意中看到了两个很好玩的可以应用于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
这样一个萌萌哒"看板娘"就诞生了。
点击查看更多内容
2人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦