Hexo 的主题还是挺多的，挑了个自己喜欢的 Even 。但是觉得有点单薄，所以就开始自己乱搞了 2333~

添加阅读进度条

个人觉得这应该是文章类型的页面，最简单的和用户交互的方式了。
第一版是和 GoTop 按钮做在一起的，后面觉得不好看，就改成带颜色的进度条了，效果还不错。

  1. 找个合适的地方，放2个DIV占位置。起名字什么的，你管我 ╭(╯^╰)╮
<body>
<div class="xxx"><div class="xxx xx2"></div></div>
<!-- ... -->
</body>
  1. 插件里有用到jQuery ，那就直接用吧。其实用原生的js也是可以实现的。
$(window).scroll(function () {
  var scrollPercentage = Math.round(100 * $(window).scrollTop() / ($(window.document).height()- $(window).height()));
  $('.xxx .xx2').css('width', scrollPercentage + '%');
});
  1. 因为还要适配移动端，所以样式自己调了调，非专业出身，勿喷。
.xxx {
top: 0px;
position: fixed;
z-index: 2;
height: 2px;
width: 100%;
background-color: #fefefe;
}
.xx2 {
width: 0%;
background-color: $theme-color;
}

更新

最近 Even 主题有了很大更新，想同步一下，所以 fork 了一份源码，把自己的改动点加了进去。
顺便更新了一下这个效果。

  1. div 只需要一个。
  2. div classname 改成了 scrollPercentage。
  3. 调整了一些其他的样式，确保效果在 PC 端和 Mobile 端都正常。