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

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

DDD

发布： 2025-11-26 16:05:00

原创

741人浏览过

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

可以通过一下地址学习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 极其简单，只需在您的项目根目录执行以下命令：

<code class="bash">composer require mtownsend/read-time</code>

登录后复制

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

2.2 快速上手：几行代码，立竿见影

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

INFINITE ALBUM

面向游戏玩家的生成式AI音乐

144

查看详情

<pre class="brush:php;toolbar:false;">use Mtownsend\ReadTime\ReadTime;

$content = "<!-- 假设这是你的文章内容，可以包含HTML标签 -->
<h1>文章标题</h1>
<p>这是文章的第一段，内容很长，包含了很多文字。用户阅读这篇文章需要一定的时间。
    这个库会自动处理HTML标签，只计算纯文本的词数。</p>
<p>第二段内容，继续填充。通过这个简单的包，我们可以轻松地为网站添加一个非常实用的功能，
    提升用户体验。这比我们自己手动去实现要方便快捷得多。</p>";

// 创建 ReadTime 实例并获取阅读时间
$readTime = (new ReadTime($content))->get();

echo $readTime; // 示例输出：3 minute read (根据实际内容和WPM值会有所不同)

登录后复制

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

<pre class="brush:php;toolbar:false;">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 的语言文件，以支持多语言显示。

<pre class="brush:php;toolbar:false;">use Mtownsend\ReadTime\ReadTime;

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

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

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

登录后复制

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

<pre class="brush:php;toolbar:false;"><h1>{{ $article->title }}</h1>
<small>预计阅读：{{ read_time($article->content) }}</small>

登录后复制

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

<pre class="brush:php;toolbar:false;"><small>
    {{ read_time([
        'content' => $article->content,
        'omit_seconds' => true,
        'abbreviated' => true,
        'words_per_minute' => 250,
        'translation' => [
            'minute' => '分钟',
            'read' => '阅读'
        ]
    ]) }}
</small>

登录后复制