计算你的博客的“阅读时间”⏱🦉

您可以订阅我的RSS 源以获取我的最新帖子。

我们可以在标准博客中添加任何可以增强阅读体验的内容吗？

预计阅读时间如何？

我们将如何计算它？

好吧，我们先看看其他人怎么做的！

• Dev.to会统计每篇文章的字数，然后除以 275（每分钟字数）。结果会向上取整，得出实际阅读分钟数。信息来源：此处。
• Medium会统计每篇文章的字数，然后除以 265（每分钟字数）。他们会对图片进行调整，不管这是什么意思！听起来很有意思，真希望能看到他们的代码！我猜他们也会把这个数字四舍五入。信息来源在这里。

我发现这些计算的一个问题是，它们把代码片段当成了普通文本！我怀疑人们读代码的速度能跟普通文本一样！😲⚡

选择一个典型的阅读速度很难，人们针对不同的人群进行了研究，得出了典型的阅读速度。你经常看到的引用是：学习速度为每分钟100到200个词（wpm），理解速度为每分钟200到400个词。基于此，阅读教程所需的时间会比阅读个人账户的时间更长。

我将向您展示如何执行与Dev.to类似的操作，但我会以不同的方式执行以下操作：

• 使用 250 wpm 作为我的阅读速度；
• 我会在下拉菜单中显示计算结果。我想知道这个神奇数字的来源，或许你博客的读者也想知道！

阅读时间

您可以在下方的笔中看到紫色的阅读时间。单击它即可显示计算结果。

HTML

<div class="reading-time">
    <details>
        <summary>1 min read</summary>
        <span></span>
    </details>
</div>

该<details>元素是一个“手风琴”，隐藏了额外的细节，用户可以根据需要查看或隐藏。

始终显示<summary>，用于显示我们的阅读时间。<span>是默认隐藏的附加详细信息，我们在此处添加计算的详细信息。我们将其包裹在 中，<div>以便于样式设置。

CSS

:root {
  --purple: rgb(115, 0, 209);
}

.reading-time{
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.reading-time details {
  position: absolute;
  background:white;
  z-index: 1;
}

.reading-time summary{
    color:var(--purple);
    font-weight: 600;
}

<div>我们将内容的环绕设置为position:relative，这样我们就可以<details>绝对定位到它，从而将其从正常的页面流中移除。这样做是因为现在当我们点击阅读时间以显示更多详细信息时，它不会扩展尺寸并使其下方的元素进一步向下推。我们将其设置为z-index:1，这样它就会显示在下方内容的上方。

JavaScript

const post = document.getElementById("post");
const readingTimeSummary = document.querySelector(".reading-time summary");
const readingTimeDetails = document.querySelector(".reading-time details span");
const avgWordsPerMin = 250;

setReadingTime();

function setReadingTime(){
    let count = getWordCount();
    let time = Math.ceil(count / avgWordsPerMin);

    readingTimeSummary.innerText = time + " min read";
    readingTimeDetails.innerText = count + " words read at " 
       + avgWordsPerMin + " words per minute.";
}

function getWordCount(){
  return post.innerText.match(/\w+/g).length;
}

我会解释的getWordCount()，其余的应该清楚了。

我们使用正则表达式 (regex)来获取帖子中的所有单词。该函数使用正则表达式搜索帖子match()中的文本，并将所有匹配结果返回到一个数组中。

正则表达式位于两个正斜杠之间，后跟一个“ g ”表示全局搜索。全局搜索会查找所有匹配项，如果省略“ g ”，则只查找第一个匹配项。正则表达式w+会查找一个或多个单词。

返回的数组match()包含每个单词作为元素。因此，数组的大小应该等于单词的数量，我们使用length数组的属性来获取它。

就这些！

读码速度

我找不到任何有关代码典型读取速度的经验信息。

在编程发展的早期，研究人员曾寻找衡量编程效率的方法，他们选择以代码行数作为主要指标。如今，这种方法已不再流行，而是被称为“编程效率悖论”。

不过，或许阅读代码行比逐字逐句地阅读更有用，因为编程语法与口语有很大不同。显然，代码的复杂性和所使用的编程语言都会影响阅读时间。关键在于，很难想出一个通用公式来估算理解任何一段代码所需的时间。

如果让我猜测的话，我会说阅读代码可能占据前面讨论的“学习”范围的低端，因为实际上我们正在学习程序的逻辑，而不仅仅是理解叙述。

我将向您展示我博客示例中代码片段的字数统计。您可以自行判断这些简单示例的阅读时间是否合理。

HTML 代码片段

29个字。阅读时间：7秒。

CSS 代码片段

174个字。阅读时间：42秒。

JavaScript 代码片段

107个字。阅读时间：26秒。

最后的话

你在 4 分钟内读完了这篇文章吗？🤔😛

我想写一些比这更复杂的东西来得出一个估计的阅读时间，以更有意义的方式考虑代码。

如果您喜欢这篇文章，请告诉我。

也许接下来，我将谈论如何在您的博客中添加评论。

黑客快乐！👩‍💻👨‍💻🙌