typecho主题joe添加文章阅读时长统计

步骤：

1. 修改functions.php添加选项；
2. 添加字数统计和阅读时长函数；
3. 改article.php显示信息；
4. 添加JavaScript计时器；
5. 调整CSS样式；
6. 测试功能。需要详细说明每个步骤，并给出代码示例，同时提供注意事项和常见问题。

在 Typecho Joe 主题 中添加 文章阅读时长统计功能（包括文章字数、预计阅读时间、实际阅读时长），可以通过以下步骤实现：

步骤 1：修改 functions.php 文件

1. 打开文件：
   进入 Joe 主题目录（路径为 /usr/themes/Joe/functions.php），找到并打开 functions.php 文件。

2. 添加选项设置：
   在文件底部（或合适的位置）添加以下代码，用于控制是否开启阅读时长统计功能：

   // 阅读时长统计设置
   $onlineTime = new Typecho_Widget_Helper_Form_Element_Select(
       'onlineTime',
       array(
           'off' => '关闭（默认）',
           'on' => '开启'
       ),
       'on',
       '是否启用文章阅读时长统计',
       '介绍：开启后，文章底部展示文章字数，预计阅读时长和已阅读时长'
   );
   $onlineTime->setAttribute('class', 'joe_content joe_other');
   $form->addInput($onlineTime->multiMode());

3. 保存文件：
   保存 functions.php 的修改。

步骤 2：添加字数统计和阅读时长函数

1. 在 functions.php 中添加函数：
   在 functions.php 文件中添加以下代码（建议放在 functions.php 底部）：

   // 文章字数统计
   function art_count($cid) {
       $db = Typecho_Db::get();
       $rs = $db->fetchRow($db->select('table.contents.text')->from('table.contents')->where('table.contents.cid=?', $cid)->order('table.contents.cid', Typecho_Db::SORT_ASC)->limit(1));
       $text = preg_replace("/[^\x{4e00}-\x{9fa5}]/u", "", $rs['text']);
       echo mb_strlen($text, 'UTF-8');
   }
   
   // 预计阅读时长计算（按每分钟400字）
   function art_time($cid) {
       $db = Typecho_Db::get();
       $rs = $db->fetchRow($db->select('table.contents.text')->from('table.contents')->where('table.contents.cid=?', $cid)->order('table.contents.cid', Typecho_Db::SORT_ASC)->limit(1));
       $text = preg_replace("/[^\x{4e00}-\x{9fa5}]/u", "", $rs['text']);
       $text_word = mb_strlen($text, 'UTF-8');
       echo ceil($text_word / 400);
   }

2. 保存文件：
   保存 functions.php 的修改。

步骤 3：修改 article.php 文件

1. 打开文件：
   进入 Joe 主题目录（路径为 /usr/themes/Joe/article.php 或 /usr/themes/Joe/public/article.php），找到并打开 article.php 文件。

2. 添加显示代码：
   在文章底部（例如 <div class="joe_article__footer"> 内部）添加以下代码：

   <div class="contain" style="margin-bottom: 10px; <?php if(Helper::options()->onlineTime !== 'on') echo 'display:none;' ?>">
       <blockquote id="onlineTime">
           本文共 <?php art_count($this->cid); ?> 个字，平均阅读时长 ≈ <?php echo art_time($this->cid); ?> 分钟
       </blockquote>
   </div>

   

3. 添加 JavaScript 计时器：
   在 </body> 标签前添加以下 JavaScript 代码（用于统计实际阅读时长）：

   <script>
       var second = 0;
       var minute = 0;
       var hour = 0;
       window.setTimeout("interval();", 1000);
       function interval() {
           second++;
           if (second == 60) {
               second = 0;
               minute += 1;
           }
           if (minute == 60) {
               minute = 0;
               hour += 1;
           }
           // 显示实际阅读时长（示例：仅显示分钟和秒）
           document.getElementById("onlineTime").innerHTML += " | 已阅读 " + minute + " 分 " + second + " 秒";
       }
   </script>

4. 保存文件：
   保存 article.php 的修改。

步骤 4：调整样式（可选）

1. 添加 CSS 样式：
   如果希望美化显示效果，可以在 functions.php 或主题的 CSS 文件中添加以下样式：

   #onlineTime {
       font-size: 0.9em;
       color: #666;
       margin-top: 10px;
       padding: 5px;
       background: #f9f9f9;
       border-left: 4px solid #0073aa;
   }

步骤 5：测试

1. 刷新网站：
   打开你的 Typecho 网站，查看文章页面是否显示字数、预计阅读时间和实际阅读时长。
2. 检查后台设置：
   进入 Typecho 后台 → 控制台 → 设置 → 主题设置，确保 onlineTime 选项已开启。