0%
3245 字 --- 耗时5 分钟.

我的建站路5:增加进度条和统计汉字个数

先看一下效果吧,这是我博客中的例子:

图1

图2

先是统计本文的字数,估计一个大致阅读时间(阅读时间做法比较粗糙),随着屏幕向下划,阅读进度不断更新,同时进度条也向右滚动。

这个其实是抄袭来的,感觉很炫酷,就拿过来用了。那个博客是个外国人的,我通过网页,把代码一点一点的搬过来,然后稍微修改,加入对中文的支持(也费了很大功夫才完成)。

在博客中添加

能用到进度条的也就是在 post.hbs 页面中,即博客的内容页面,理所应当,进度条应该放到这里。它们显示的位置已经被规定死了,在顶端部分。

<div class="reading-time-indicator js-post-sticky-header">
    <div class="post-reading-time js-post-reading-time">
        <div class="percent js-percent-count">0%</div>
        <progress value="0" class="read-progress-indicator single" max="12982">
            <div class="progress-container">
                <span class="progress-bar"></span>
            </div>
        </progress>
        <div class="read-estimation">
            <div class="reading-time-blog-logo">
                <a class="blog-logo" href="javascript:history.go(-1)"><i class="fa fa fa-chevron-left"></i></a>
            </div>
            <div class="read-estimation-content">
                <div class="estimated-time">
                    <span class="js-word-count">3245</span> 字 --- 耗时<span class="eta">5 分钟</span>.
                </div>
            </div>
        </div>
    </div>
</div>

进度条有两个功能,先来介绍一下进度条吧。

进度条

通过 html 标签可以看到,进度条用的是一个叫做 progess 的 HTML 5标签,这个标签支持 max 和 value 属性,分别定义完成时的值和当前已经完成的值(其实我觉得还不如用百分百来的直接)。W3School对 Progess 的介绍

既然是一个百分百,这个百分百从何而来?

max 的内容好办,肯定是文章的长度。文章内容最外层是包裹在 html 的 article 标签里,真正的内容是在 class=post-content里,令 max=$('.post-content').height()

value 是根据当前 window 的滑动条的长度决定的,value=$(window).scrollTop()有一个问题,当前的滑动条包括 header 部分,长度大概有 400px ,但是不固定,带来的结果导致我们浏览的进度条总是比实际值要快,这部分需要剪掉,value=$(window).scrollTop()-$('header').height()-240。表达式最后减的 240 是padding-bottompadding-top 的长度。

函数如下:

var getHeader = function() {
    return $('header').height()+240
}
var getMax = function() {
    return $('.post-content').height();
};
var getValue = function() {
    return $(window).scrollTop()-getHeader();
};

当滑动条处于 top 位置或者读完整个文章后,要把进度条隐藏,当进度条刷新时,不断改变当前 value 的值。

$(document).on('scroll', function(){
    // On scroll only Value attr needs to be calculated
    progressBar.attr({ value: getValue() });
    percent = Math.floor((getValue() / getMax()) * 100) ;
    if (percent < 0) {
        percent = 0;
        $('.js-post-sticky-header').removeClass('visible');
    } else if (percent > 100) {
        percent = 100;
        $('.js-post-sticky-header').removeClass('visible');
    } else {
        $('.js-post-sticky-header').addClass('visible');
    }
    $('.js-percent-count').text(percent + '%');
});
$(window).resize(function(){
    // On resize, both Max/Value attr needs to be calculated
    progressBar.attr({ max: getMax(), value: getValue() });
});

设置阅读时间

先要统计文本的数量,由于原 api 只能支持英文,我加入了中文和数字的统计,代码如下:

//通过正则表达式来获得文档的单词,汉字和数字个数
//text = $('.Post-Content').text();
var totalWords=0;
var pattern_char = /[a-zA-Z]+/g;
var pattern_cn = /[\u4e00-\u9fa5]/g;
var pattern_num = /[0-9]+/g
var count_char = text.match(pattern_char)?text.match(pattern_char).length:0;
var count_cn = text.match(pattern_cn)?text.match(pattern_cn).length:0;
var count_num=text.match(pattern_num)?text.match(pattern_num).length:0;
totalWords=count_char+count_cn+count_num;

其中,pattern_char 用来匹配英文单词数量,pattern_cn用来统计汉字数量,pattern_num用来统计纯数字的数量,然后把他们相加就是 totalWords 的数量。

其他的就没什么了,想法都很简单,具体可以参考 Github源码,本文介绍的源码在 assets/js/main.js 和 assets/js/vendor/reading-time.js 两个文件中。