Typecho博客评论无限滚动加载实现指南

Typecho实现评论无限滚动加载的完整解决方案

🌐 我的个人网站：乐乐主题创作室

引言

在现代博客系统中，评论系统是用户互动的重要部分。传统的分页加载方式会打断用户的阅读体验，而无限滚动加载（Infinite Scroll）则能提供更流畅的交互。本文将详细介绍如何在Typecho博客系统中实现评论的无限滚动加载功能。

技术背景与原理

无限滚动加载是一种通过监听滚动事件，当用户滚动到页面底部附近时自动加载更多内容的技术。相比传统分页，它具有以下优势：

1. 更流畅的用户体验
2. 更高的用户参与度
3. 减少页面跳转带来的中断感

在Typecho中实现这一功能，我们需要：

1. 修改评论模板以支持分块加载
2. 编写AJAX接口获取评论数据
3. 实现前端滚动事件监听
4. 处理加载状态和错误情况

方案设计

系统架构

+-------------------+     +-------------------+     +-------------------+
|   Typecho 评论    |     |    AJAX 接口      |     |   前端JS实现      |
|   分块查询系统    |---->|    (/comments)    |---->|   无限滚动加载    |
+-------------------+     +-------------------+     +-------------------+

技术选型

1. 后端：Typecho原生PHP + 自定义路由
2. 前端：原生JavaScript（兼容jQuery）
3. 数据传输：JSON格式

实现步骤

第一步：创建AJAX评论接口

在Typecho中，我们需要创建一个自定义路由来处理AJAX评论请求。

// 在主题的functions.php中添加以下代码
Typecho_Plugin::factory('Widget_Archive')->handleInit = function($archive) {
   
   
    if ($archive->request->is('comments')) {
   
   
        // 处理AJAX评论请求
        $this->handleAjaxComments();
        exit;
    }
};

function handleAjaxComments() {
   
   
    $page = isset($_GET['page']) ? intval($_GET['page']) : 1;
    $cid = isset($_GET['cid']) ? intval($_GET['cid']) : 0;
    
    // 安全验证
    if ($cid <= 0) {
   
   
        echo json_encode(['error' => 'Invalid post ID']);
        return;
    }
    
    $db = Typecho_Db::get();
    $select = $db->select()->from('table.comments')
        ->where('cid = ?', $cid)
        ->where('status = ?', 'approved')
        ->order('coid', Typecho_Db::SORT_ASC)
        ->page($page, 10); // 每页10条评论
    
    $comments = $db->fetchAll($select);
    
    // 格式化评论数据
    $formatted = array_map(function($comment) {
   
   
        return [
            'author' => $comment['author'],
            'mail' => $comment['mail'],
            'url' => $comment['url'],
            'text' => $comment['text'],
            'created' => date('Y-m-d H:i:s', $comment['created']),
            'avatar' => Typecho_Common::gravatarUrl($comment['mail'], 48, 'X', 'mm', true)
        ];
    }, $comments);
    
    header('Content-Type: application/json');
    echo json_encode([
        'success' => true,
        'comments' => $formatted,
        'hasMore' => count