如何在 Divi 中显示估计的阅读时间和字数（使用 ReadingTime.js）
已发表: 2020-10-27有些人（包括我）很欣赏博文的长度，或者更重要的是，阅读需要多少时间。 一个很好的方法是在博客文章的顶部显示估计的阅读时间和/或字数。 您可以在诸如 medium.com 之类的流行博客上看到此功能。 它不必具有侵入性或分散用户参与内容的注意力。 但它可以为那些花费大量时间在网络上吞噬内容的人增加一个很好的用户体验提升。
在本教程中，我们将向您展示一种快速简便的方法，为您的 Divi 博客文章添加估计的阅读时间和字数。 我们将要使用的 readingTime.js 库简单、轻量，并且易于在您的 Divi 站点上实现。 此外，您可以更好地控制阅读时间和字数位置的风格和位置。 所有这一切都无需依赖另一个插件！
我们将使用 Divi Theme Builder 将估计的阅读时间和字数添加到博客文章模板中。 因此，一旦将其添加到模板中，阅读时间和字数就会很好地显示在整个网站的所有帖子上。
让我们开始吧。
抢先看
这是我们将添加到 Divi 中的帖子模板的阅读时间和字数的快速浏览。
免费下载布局
要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
如何上传模板
转到 Divi 主题生成器
要上传模板，请导航到 WordPress 网站后端的 Divi Theme Builder。
上传网站模板
然后，在右上角，您会看到一个带有两个箭头的图标。 单击该图标。
导航到导入选项卡，上传您可以在本文中下载的 JSON 文件，然后单击“导入 Divi 主题生成器模板”。
保存 Divi 主题生成器更改
上传文件后，您会注意到一个新模板，其中包含已分配给所有帖子的新正文区域。 一旦您希望激活模板，请立即保存 Divi Theme Builder 更改。
让我们进入教程，这样我们就可以学习从头开始构建这个东西，好吗？
如何在 Divi 中显示估计阅读时间和字数
你需要什么开始
首先，您需要执行以下操作：
- 导航到 Divi 主题生成器
- 单击页面右上角的便携性图标。
- 在可移植性弹出窗口中选择导入选项卡。
- 选择/导入 Divi 商务顾问帖子模板文件（在此处下载）。
- 单击导入按钮
之后，您将有一个可以编辑的帖子模板。
将文本/HTML 添加到帖子模板
要编辑帖子模板，请单击自定义正文区域上的编辑图标。
在帖子布局编辑器中，在布局顶部包含帖子元数据的行下方添加一个新的单列行。
完成后，将文本模块添加到新行。
在文本模块设置中，将以下 HTML 粘贴到正文中（使用文本选项卡）：
<p>Reading Time: <span style="color: #edbb5f;" class="eta"></span> ( Word Count: <span style="color: #edbb5f;" class="word-count"></span> )</p>
需要记住的重要一点是，带有“eta”类的 span 标签最终会显示帖子内容的估计阅读时间。 而带有“word-count”类的 span 标签将显示帖子内容的字数。
设计阅读时间文本
在设计选项卡下，更新文本样式如下：
- 文字字体： Poppins
- 文字字体粗细：粗体
- 文字字体样式：TT
- 文字文字颜色：#ffffff
- 文字文字大小：14px（桌面），12px（手机）
- 文字字母间距：2px
- 文本对齐：居中
样式行
文本设置完成后，打开该行的设置并更新以下内容：
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
在高级选项卡中，更新位置：
- 位置：绝对
- 位置：左下角
添加代码
要添加必要的代码以生成估计的阅读时间和字数，首先，在文本模块下添加一个代码模块。
我们将使用带有一些自定义代码的 readingtime.js 库来定位我们的帖子内容区域、阅读时间目标类eta和字数目标类word-count 。
将以下代码粘贴到代码块中，确保将代码包装在脚本标签中：
(function($) {
$(document).ready(function(){
$('.et_pb_post_content').readingTime({
readingTimeTarget: $('.eta'),
wordCountTarget: $('.word-count'),
wordsPerMinute: 275,
lang: 'en',
});
});
})( jQuery );
关于守则
目标类et_pb_post_content用于指定 Divi 中保存帖子内容的帖子内容区域，以便代码知道它需要计算和估计阅读时间的文本。 例如，如果您使用body作为目标，则代码将计算整个页面上的所有内容/文本，而不仅仅是文章的内容。
readingTimeTarget被分配给eta类，它对应于我们添加到文本模块中的span标签的类。 并且wordCountTarget被分配给我们添加到文本模块中的另一个span标签的word-count类。
此外，随时更新每分钟的字数值（当前为 275）以表示您认为应该是什么。 这当然会影响显示的阅读时间。 根据我的研究，成年人平均每分钟阅读 300 个单词。 此外，您还可以随时更新语言值。 例如，如果您希望文本以法语显示，您可以将 'en' 替换为 'fr'）。 有关更多信息，您可以查看 github 上的文档。
保存模板布局和主题生成器。
然后，导航到 Divi > 主题选项 > 集成。
然后将库添加到带有脚本标签的标题区域：
src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"
它应该是这样的……
最后结果
现在您需要做的就是访问您网站上的实时博客帖子，以查看帖子内容顶部的估计阅读时间和字数。
最后的想法
将帖子估计阅读时间和字数添加到您的 Divi 博客帖子中非常容易。 此外，您可以选择要在帖子模板上显示元素的位置，并使用内置的 Divi 设计设置为其设置样式。 希望这会派上用场！
我期待在评论中收到您的来信。
干杯!