在阅读博客文章时,我们往往需要知道阅读的进度,对于NEXT
主题,可以通过在主题配置文件中(blog/themes/next/_config.yml
)搜索scrollpercent
然后将false
改为true
,部署之后效果如图所示:
这种样式挺好看的,但是我需要想要读者能够通过顶部加载条来清楚自己的阅读进度,根据网上的教程:
hexo搭建教程
其中有提到如何添加顶部加载条:
1.通过CMD定位到主题的文件夹:
1 | cd themes/next |
2.克隆插件至本地
1 | git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress |
3.在主题
配置文件(blog/themes/next/_config.yml
)中添加如下代码:
1 | reading_progress: |
4.效果为:
但是!我没成功!
其中的问题我也不知道出在那里,但是我不甘心,在接下来我将通过自己配置达到使用的目的,我首先查看了blog/themes/next/source/lib
中,里面存在reading_progress
文件夹,打开文件夹里面有一个reading_prgress.js
文件,那我准备一步步的来。
1.我首先将js代码引入了post
网页中,路径为:themes\next\layout\_scripts\vendors.swig
,在该文件中添加代码引入js
依赖:
1 | {% set js_vendors.reading_progress = 'reading_progress/reading_progress.js' %} |
2.我打开了reading_progress.js
文件,里面有这样一句代码:
1 | var $bar = $('.reading-progress-bar') |
因此接下来我要做的工作有两个,在HTML
文件中添加包含reading-progress-bar
类的div
以及在css
中创建名为reading-progrsss-bar
类的进度条样式。
3.在themes\next\layout\post.swig
中的
1 | <div id="posts" class="posts-expand"> |
下添加包含reading-progress-bar
类的div
,即:1
<div class="reading-progress-bar"></div>
post.swig
中完整代码为: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
30
31
32
33
34
35
36
37
38{% 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
类的进度条样式代码:
1 | .reading-progress-bar{ |
其中的height
、background
以及border-radius
可以按照自己的喜好随意修改,其他的属性不建议修改。
其中:background
中的代码为随机颜色。