Статьи

Как добавить индикатор времени чтения в свой блог за десять минут

Август 2, 2018

Время — деньги, верно, и, учитывая, что в настоящее время мы постоянно наводнены огромным количеством информации, мы должны быть быстрыми в ее потреблении и особенно хорошими в фильтрации того, что стоит, а что нет. Сервисы «Прочтите позже», такие как Instapaper или Pocket , процветают, но когда вы решили прочитать что-то сразу или позже? Часто в зависимости от того, сколько времени уходит на чтение и сколько времени у вас сейчас. Поэтому многие популярные платформы для ведения блогов (например, Medium) добавили индикатор времени чтения в верхней части каждого поста. Я просто потратил пару минут времени и попытался добавить его в свой блог здесь, и был удивлен, насколько это просто.

Как это работает?

Скорость чтения измеряется в словах в минуту (коротко: wpm). Средний человек читает от 200 до 250 в минуту. Таким образом, формула для времени чтения — это не что иное, как количество слов в вашем блоге, деленное на скорость чтения среднего человека.

                        total words
reading time =  round(-----------------)
                        reading speed

В моем блоге здесь я использую 200 об / мин, поэтому даже с некоторыми отвлекающими моментами вы сможете прочитать его за указанное время.

Реализация

Для реализации мы используем JavaScript. Это самый простой способ обработать ваш текст на сайте после его рендеринга. Но, конечно, если ваша платформа для блогов позволяет обрабатывать ее статически, перед рендерингом вы также можете использовать этот подход.

Первое, что нужно сделать, это подсчитать количество слов вашего поста . У вас должен быть один элемент DOM, который содержит ваше тело сообщения. Например, в моем блоге:

<div class="article-body">
    ...
</div>

Правило 1: Google для вашей проблемы. Существует довольно высокая вероятность того, что у кого-то уже была такая же проблема, и, возможно, даже лучше, чем вы могли бы это сделать (в противном случае просто расширьте и внесите свой вклад ).

Действительно, Счетный кажется именно тем, что я искал.

Countable — это функция JavaScript, которая позволяет добавлять счетчики слов, слов и символов в элемент HTML. Countable является библиотекой с нулевой зависимостью и имеет размер 1 КБ при минимизации и сжатии. Счетный сайт GitHub

Хотя он может даже посчитать ваши слова вживую, в этом особом случае нам нужно выполнить это только один раз. Это сделано с

Countable.once($('.article-body')[0], function (counter) {
    console.log(counter)
})

counter это объект со следующими свойствами

Object {
    paragraphs: 21, 
    words: 377, 
    characters: 1834, 
    all: 2252
}

Теперь это действительно становится довольно легко. Расчет минут производится следующим образом

Countable.once($('.article-body')[0], function (counter) {
    var wpm = 200,
        estimatedRaw = counter.words / wpm,
        minutes = Math.round(estimatedRaw);

    var effectiveTime = (minutes < 1) ? "a couple of secs" : minutes + " min read";

    //display it
    $('.reading-time').html(effectiveTime);
});

Вот и все.


Скриншот индикатора времени чтения на этом блоге здесь

Этот пример показывает только минуты . Учитывая, что это приблизительное значение, отображение секунд не имеет смысла, но если вы хотите, вы можете легко это сделать.
Как вы можете видеть, я выполняю округление, так как деление на wpm дает вам значения, например 2.3122. 2 представляет минуты, в то время как остаток 0,3122 представляет секунды. Просто умножьте их на 60, и вы получите реальные значения. В JavaScript это может быть реализовано так:
(проверьте код ниже, поскольку я не пробовал это явно)

var wpm = 200,
    estimatedRaw = counter.words / wpm,
    remainder = estimatedRaw % 1,
    minutes = estimatedRaw - remainder,
    seconds = Math.round(remainder * 60);

Упущения

Очевидно, что довольно сложно также рассмотреть чтение исходного кода, которое требует не только чтения слов, но, конечно, большего умственного анализа и понимания.


35
Share: