为hexo主题添加顶部进度加载条

最终效果，见文末。

使用Everything在根目录下搜索head.ejs或head.swig，取决于你使用的主题所采用的引擎，如果是hueman主题，就是/themes/hueman/layout/common/head.ejs，如果是next主题就是/themes/next/layout/_partials/head.swig。

实现方法：

在文件的靠前一点的位置添加下面的代码（如果连接打不开，文末有文件的下载地址）：

<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">

默认的是粉色的，要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码（接在刚才link的后面）

<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>

如果没有效果，找到主题的配置文件_config.yml，搜索一下是否有pace: false选项，如果有改为true。

原文地址

pace.min.js
pace-theme-flash.css