Reading-progress

我尝试了很多种可视化阅读进度条的方式，最终选择了这种。

在阅读博客文章时，我们往往需要知道阅读的进度，对于NEXT主题，可以通过在主题配置文件中（blog/themes/next/_config.yml)搜索scrollpercent然后将false改为true,部署之后效果如图所示:

这种样式挺好看的，但是我需要想要读者能够通过顶部加载条来清楚自己的阅读进度，根据网上的教程：
hexo搭建教程
其中有提到如何添加顶部加载条：

1.通过CMD定位到主题的文件夹：

cd themes/next

2.克隆插件至本地

git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress

3.在主题配置文件(blog/themes/next/_config.yml)中添加如下代码：

reading_progress:
  enable: true # 进度条开启状态
  color: "#37c6c0" # 进度条颜色
  height: 2px # 进度条高度

4.效果为：

但是！我没成功！

其中的问题我也不知道出在那里,但是我不甘心，在接下来我将通过自己配置达到使用的目的，我首先查看了blog/themes/next/source/lib中，里面存在reading_progress文件夹，打开文件夹里面有一个reading_prgress.js文件，那我准备一步步的来。

---

1.我首先将js代码引入了post网页中，路径为:themes\next\layout\_scripts\vendors.swig,在该文件中添加代码引入js依赖：

{% set js_vendors.reading_progress   = 'reading_progress/reading_progress.js' %}

这段代码放在该文件中的任何位置都可以，但是要注意他需要是个独立的位置。如图：

即：我们可以放在模块之间而不要放在判断语句中。

2.我打开了reading_progress.js文件，里面有这样一句代码：

var $bar = $('.reading-progress-bar')

因此接下来我要做的工作有两个，在HTML文件中添加包含reading-progress-bar类的div以及在css中创建名为reading-progrsss-bar类的进度条样式。

3.在themes\next\layout\post.swig中的

<div id="posts" class="posts-expand">

下添加包含reading-progress-bar类的div，即：

<div class="reading-progress-bar"></div>

post.swig中完整代码为：

{% extends '_layout.swig' %}
{% import '_macro/post.swig' as post_template %}
{% import '_macro/sidebar.swig' as sidebar_template %}


{% block title %}{{ page.title }} | {{ config.title }}{% endblock %}

{% block page_class %}page-post-detail{% endblock %}


{% block content %}

  <div id="posts" class="posts-expand">
    <div class="reading-progress-bar"></div>
    {{ post_template.render(page,false,true) }}

    <div class="post-spread">
      {% if theme.jiathis %}
        {% include '_partials/share/jiathis.swig' %}
      {% elseif theme.baidushare %}
        {% include '_partials/share/baidushare.swig' %}
      {% elseif theme.add_this_id %}
        {% include '_partials/share/add-this.swig' %}
      {% elseif theme.duoshuo_shortname and theme.duoshuo_share %}
        {% include '_partials/share/duoshuo_share.swig' %}
      {% endif %}
    </div>
  </div>

{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(true) }}
{% endblock %}

{% block script_extra %}
  {% include '_scripts/pages/post-details.swig' %}
{% endblock %}

4.通过打开themes\next\source\css\_custom\custom.styl,在末尾创建名为reading-progrsss-bar类的进度条样式代码：

.reading-progress-bar{
  position: fixed
  top: 0
  left 0
  z-index 9999
  display: block
  height 8px
  background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%);
  border-radius: 0 5px 5px 0
  }

其中的height、background以及border-radius可以按照自己的喜好随意修改，其他的属性不建议修改。
其中：background中的代码为随机颜色。

5.创建完毕使用git bash输入hexo s生成预览，效果如下(左上角）：

写在最后：

当我们对custom.styl操作之后仅仅通过hexo g&&hexo deploy可能无法部署到网页上，此时我们可以hexo clean&&hexo g&&hexo deploy通过清除重建来达到部署的目的。