为Hexo博客添加顶部加载条

有时候会看到有的网页加载时上方出现进度条，一直想加到自己的博客上来，今天折腾了一番，终于成功了，记录下来。

开始制作

我使用的是Pace, 不过听别人说NProgress更好用，改天试下

链入相关的`css` `js`文件

在head.ejs里加入中的head里

1 2	<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script> <link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

head.ejs路径一般在博客当前目录下的themes/xxx/layout/_partial/中
我使用的cdn外链，也可以下载下来，本地链入

这个时候我们刷新一下博客，发现已经成功了，不过有个问题，默认的颜色为粉红色…让我们来改一改

更改默认样式

还是在head.ejs中,在

中加入

<style>
    .pace .pace-progress {
    	background: #1E92FB; /*进度条颜色*/
    	height: 3px;
    }
    .pace .pace-progress-inner {
     	box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
    	border-top-color: #1E92FB;	/*上边框颜色*/
    	border-left-color: #1E92FB;	/*左边框颜色*/
    }
  </style>