Hexo推荐插件整理

Hexo 推荐插件整理

Hexo博客框架具有非常强大的插件系统，可为Hexo提供无限可能的功能拓展，只有想不到，没有做不到。

插件安装与卸载

在Hexo网站的目录下，使用npm就可以直接安装：

1
npm install <插件名> --save

其中，插件名均以“hexo-”开头，Hexo会自动加载有此前缀的插件，而没有该前缀的插件是不会被自动识别的。--save参数告诉npm将插件名记录在网站目录的package.json里，以便于直接使用npm install（不带参数）更新或直接安装。

插件卸载

对应地，使用npm也可以直接卸载：

1
npm un <插件名> --save

加上--save参数后，存储在package.json中的插件信息也会被移除；如果不加此参数，那么下次使用npm install安装时该插件还会被装上。

查看 Hexo 插件：

1
hexo --debug

页面樱花落背景

在themes/Butterfly/source/js目录下新建sakura.js文件，打开这个网址传送门，将内容复制粘贴到sakura.js即可。

/Butterfly/layout/includes文件夹下找到head.pug文件，在最后引入

1
2
if theme.sakura.enable
  script(src="/js/sakura.js")

在主题的主配置文件加入Butterfly/_config.yml

1
2
3
# 页面樱花飘落动效
sakura:
  enable: true

头像呼吸灯

1.先说呼吸灯，这个可以用js实现，也可以用纯css的关键帧实现，貌似css的性能会高点，在custom.css添加如下代码，颜色和时间啥的大家可以根据自己的喜好调节，其实就是关键帧之间通过某个插值方法连续变样式而已，会这一个你就会DIY各种高大上的动画啦

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* 头像呼吸灯 */
[data-theme="light"] .avatar-img {
  animation: huxi_light 4s ease-in-out infinite;
}
[data-theme="dark"] .avatar-img {
  animation: huxi_dark 4s ease-in-out infinite;
}
@keyframes huxi_light {
  0% {
    box-shadow: 0px 0px 1px 1px #e9f5fa;
  }
  50% {
    box-shadow: 0px 0px 5px 5px #e9f5fa;
  }
  100% {
    box-shadow: 0px 0px 1px 1px #e9f5fa;
  }
}
@keyframes huxi_dark {
  0% {
    box-shadow: 0px 0px 1px 1px #39c5bb;
  }
  50% {
    box-shadow: 0px 0px 5px 5px #39c5bb;
  }
  100% {
    box-shadow: 0px 0px 1px 1px #39c5bb;
  }
}