信息发布→ 登录 注册 退出

如何为网站文章添加“阅读时间估算”功能,mtownsend/read-time助你轻松提升用户体验

发布时间:2025-11-26

点击量:

可以通过一下地址学习composer:学习地址

1. 困扰:文章阅读时间估算,一个看似简单却不简单的需求

想象一下,你正在浏览一个博客网站,看到一篇标题很吸引人的文章。你点进去,却发现内容很长,密密麻麻的文字让你有点望而却步。这时,如果文章开头能有一个“预计阅读时间:5分钟”的提示,是不是会让你更有信心决定是否继续阅读?

在当今信息爆炸的时代,用户的注意力是宝贵的。像 Medium 这样的平台,早已将“阅读时间估算”作为标配功能,它能帮助用户快速评估内容价值和所需投入的时间,从而做出更明智的阅读决策,极大地提升了用户体验和内容互动率。

作为开发者,我们也希望为自己的网站或应用添加这样的功能。然而,要从零开始实现它,却并非易事:

  • 内容解析: 如何准确地从HTML内容中提取纯文本并计算词数?需要处理各种标签、特殊字符。
  • 阅读速度: 如何确定一个合理的平均阅读速度(WPM,Words Per Minute)?这可能因语言和用户习惯而异。
  • 时间计算与格式化: 如何将总词数转换为分钟和秒,并以友好的方式展示(例如“5分钟阅读”、“约3分钟”或“3 min read”)?
  • 国际化支持: 如果网站支持多语言,如何为“分钟”、“秒”、“阅读”等词提供不同的翻译?
  • 框架集成: 如何将这套逻辑优雅地集成到 Laravel、Lumen 或其他 PHP 框架中,避免代码冗余和耦合?

面对这些挑战,我们不禁会想:有没有一个现成的、可靠的工具能帮我们一劳永逸地解决这个问题呢?

2. 解决方案:Composer 与 mtownsend/read-time 的完美结合

答案是肯定的!得益于 PHP 生态中强大的 Composer 包管理工具,我们可以轻而易举地引入 mtownsend/read-time 这个优秀的库,它正是为解决上述问题而生。

mtownsend/read-time 是一个简洁而强大的 PHP 包,它能够根据您提供的内容,自动计算出预估的阅读时间,并提供灵活的展示选项。它不仅支持纯文本内容,还能智能处理包含HTML标签的字符串,确保计算的准确性。

2.1 安装:轻而易举,一步到位

使用 Composer 安装 mtownsend/read-time 极其简单,只需在您的项目根目录执行以下命令:

composer require mtownsend/read-time

如果您使用 Laravel 或 Lumen 框架,该包还提供了额外的便捷支持,例如服务提供者自动注册和配置发布,让集成变得更加无缝。

2.2 快速上手:几行代码,立竿见影

安装完成后,您就可以立即使用它了。最基本的用法如下:

use Mtownsend\ReadTime\ReadTime;

$content = "

文章标题

这是文章的第一段,内容很长,包含了很多文字。用户阅读这篇文章需要一定的时间。 这个库会自动处理HTML标签,只计算纯文本的词数。

第二段内容,继续填充。通过这个简单的包,我们可以轻松地为网站添加一个非常实用的功能, 提升用户体验。这比我们自己手动去实现要方便快捷得多。

"; // 创建 ReadTime 实例并获取阅读时间 $readTime = (new ReadTime($content))->get(); echo $readTime; // 示例输出:3 minute read (根据实际内容和WPM值会有所不同)

是不是非常简单?您甚至可以传入一个包含多段内容的数组,mtownsend/read-time 会将它们合并起来计算总的阅读时间,这在处理主文章和侧边栏内容时非常有用:

use Mtownsend\ReadTime\ReadTime;

$mainContent = "主文章内容...";
$sidebarContent = "侧边栏补充内容...";

$totalReadTime = (new ReadTime([$mainContent, $sidebarContent]))->get();
echo $totalReadTime;

2.3 深度定制:满足你的个性化需求

mtownsend/read-time 不仅易用,而且高度可定制。您可以根据自己的需求调整各种参数:

  • 省略秒数 (omitSeconds): 通常我们只关心分钟数,秒数可以省略。
  • 缩写 (abbreviated): 将 "minute" 缩写为 "min","second" 缩写为 "sec"。
  • 自定义阅读速度 (wpm): 调整平均每分钟阅读的词数,以适应不同语言或目标用户群。
  • 仅显示时间 (timeOnly): 只显示数字和单位,不包含“read”等额外文字。
  • 国际化 (setTranslation): 手动设置或发布 Laravel 的语言文件,以支持多语言显示。
use Mtownsend\ReadTime\ReadTime;

$content = "你的文章内容...";

$customReadTime = (new ReadTime($content))
                    ->omitSeconds() // 不显示秒数
                    ->abbreviated() // 使用缩写,如 "min"
                    ->wpm(250) // 设置每分钟250个词
                    ->get();

echo $customReadTime; // 示例输出:3 min read

如果您是 Laravel 用户,更可以直接使用其提供的全局辅助函数 read_time(),语法更加简洁:

{{ $article->title }}

预计阅读:{{ read_time($article->content) }}

甚至可以通过传递关联数组来定制辅助函数:


    {{ read_time([
        'content' => $article->content,
        'omit_seconds' => true,
        'abbreviated' => true,
        'words_per_minute' => 250,
        'translation' => [
            'minute' => '分钟',
            'read' => '阅读'
        ]
    ]) }}

3. 优势总结与实际应用效果

mtownsend/read-time 包的引入,为我们的项目带来了多重优势:

  • 提升用户体验 (UX): 提供直观的阅读时间估算,帮助用户管理时间,增强阅读意愿。
  • 开发效率倍增: 无需手动处理复杂的文本解析、词数统计和时间格式化逻辑,大大节省了开发时间。
  • 高度可配置性: 灵活调整阅读速度、显示格式和语言,满足多样化的项目需求。
  • 框架友好: 对 Laravel 和 Lumen 的深度支持,使得集成过程异常顺畅。
  • 代码整洁度: 将阅读时间估算逻辑封装在一个独立的包中,使您的项目代码更加模块化、易于维护。
  • 专业度提升: 网站或应用看起来更加专业和现代化,与流行的内容平台保持同步。

无论是博客、新闻网站、在线文档还是任何包含大量文本内容的平台,mtownsend/read-time 都能为您提供一个优雅、高效的解决方案。它将一个看似微小却能显著提升用户体验的功能,以最简单的方式带到您的指尖。

结语

在 PHP 开发中,借助 Composer 这样的工具,我们可以轻松利用社区的智慧,解决各种复杂问题。mtownsend/read-time 就是一个很好的例子,它将一个用户体验的痛点转化为一个简单的API调用。下次当您需要为文章内容添加阅读时间估算时,不妨试试这个包,它一定会让您事半功倍!

标签:# 字符串  # 如何将  # 每分钟  # 它将  # 轻而易举  # 很长  # 可以通过  # 您的  # 这是  # 自己的  # 我们可以  # ux  # composer  # 封装  # 关联数组  # api调用  # 多语言  # ai  # 工具  # html  # laravel  # word  # php  
在线客服
服务热线

服务热线

4008888355

微信咨询
二维码
返回顶部
×二维码

截屏,微信识别二维码

打开微信

微信号已复制,请打开微信添加咨询详情!