Typecho文章列表无刷实现评论显示和回复功能 - 洛丽糖(12条评论)
首页 » 休闲 » 正文内容
3个月前 寻梦xunm 510 休闲
超过111天 温馨提示
本文最后更新于2024年01月12日，已超过111天没有更新，若内容或图片失效，请留言反馈。
第一步在需要引入jquery库,这一步不能少，可以使用本地js或者下面的cdn或者其他的cdn（一般都放在主题中的footer.php）
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
第二步把下面的html代码和js代码放到主题相关文件中（一般都放在主题中的footer.php）

html表单

<div class="hidden">
    <input class="webSiteHomeUrl" value="<?php echo getWebsiteHomeUrl(); ?>" />
    <input id="commentsRequireMail" value="<?php echo $this->options->commentsRequireMail; ?>" />
    <input id="commentsRequireURL" value="<?php echo $this->options->commentsRequireURL; ?>" />
    <li>
        <div class="bg-white p-2 rounded-sm border-1 border-solid border-[#07c160]">
            <div class="grid grid-cols-3 gap-2">
                <input placeholder="昵称" class="border-0 outline-none bg-color-primary p-1 rounded-sm" />
                <input placeholder="网址" class="border-0 outline-none bg-color-primary p-1 rounded-sm" />
                <input placeholder="邮箱" class="border-0 outline-none bg-color-primary p-1 rounded-sm" />
            </div>
            <div class="mt-2">
                <input placeholder="回复内容" class="border-0 outline-none w-full rounded-sm p-1" />
            </div>
            <div class="flex justify-end mt-2">
                <div class="face mr-2 cursor-pointer"></div>
                <button
                    class="btn-comment bg-[#07c160] border-0 outline-none text-white cursor-pointer rounded-sm">回复</button>
            </div>
        </div>
    </li>
</div>

js代码

<script>
   let globalData = {
    webSiteHomeUrl: '',//请求的域名地址
};

window.onload = async () => {
    // 网站接口请求地址前缀
    globalData.webSiteHomeUrl = document.querySelector('.webSiteHomeUrl').value;
    // 点击评论
    clickComment();
};

/**
 * 点击评论
 */
function clickComment() {
    $(".comment-to").off('click');
    $(".comment-to").on('click', function (e) {
        removeAllCommentForm();

        let cid = $(e.target).data('cid');
        let coid = $(e.target).data('coid');
        let name = $(e.target).data('name');

        if (coid == undefined) {
            // 如果没有coid，那么就在最下方显示评论框
            document.querySelector('.comment-ul-cid-' + cid).insertAdjacentHTML('beforeend', getCommentFormHtml(cid));
        } else {
            //有coid，在对应评论处显示评论框
            document.querySelector('.comment-li-coid-' + coid).insertAdjacentHTML('afterend', getCommentFormHtml(cid, coid, name));
        }

        // 点击评论回复按钮
        $(".btn-comment").off('click');
        $(".btn-comment").on('click', function (e) {
            let cid = $(e.target).data('cid');
            let coid = $(e.target).data('coid');
            //邮件地址
            let requiredMail = $("#commentsRequireMail").val();
            //网站地址
            let requiredURL = $("#commentsRequireURL").val();

            let author = document.querySelector('.input-author').value;
            let url = document.querySelector('.input-url').value;
            let mail = document.querySelector('.input-mail').value;
            let text = document.querySelector('.input-text').value;
            let param = {
                cid: cid,
                parent: coid,
                author: author,
                mail: mail,
                url: url,
                text: text,
            };
            if (param.author === '') {
                alert('昵称不能为空');
                return;
            }
            if (requiredMail == 1 && param.mail === '') {
                alert('邮件不能为空');
                return;
            }
            if (requiredURL == 1 && param.url === '') {
                alert('网址不能为空');
                return;
            }
            if (param.text === '') {
                alert('评论内容不能为空');
                return;
            }

            // 记录信息到localStorage
            window.localStorage.setItem('author', author);
            window.localStorage.setItem('mail', mail);
            window.localStorage.setItem('url', url);



            $.ajax({
              url: globalData.webSiteHomeUrl + '/api/comment',
              type: 'POST',
              data: param,
              headers: {
                'content-type': 'application/x-www-form-urlencoded'
              },
              success: function(response) {
                response = $.parseJSON(response)
                console.log(response);
                if (response.status == 1) {
                        removeAllCommentForm();

                        let waiting = '';
                        // 把评论显示在对应位置
                        if (response.comment.status == 'waiting') {
                            // 显示待审核
                            waiting = '<span class="comment-waiting">待审核</span>';
                        }

                        if (param.parent > 0) {
                            //有coid，在对应评论处显示评论框
                            document.querySelector('.comment-li-coid-' + param.parent).insertAdjacentHTML('afterend', `
                                <li class="pos-rlt comment-li-coid-${response.comment.coid}">
                        <div class="comment-body">
                            <span class="text-[14px] text-color-link">
                                <a href="${response.comment.url}" target="_blank" class="cursor-pointer text-color-link no-underline">${response.comment.author}</a>
                            </span>
                            <span class="text-[14px]">回复</span>
                            <span class="text-[14px] text-color-link">${name}</span>
                            <span data-separator=":" class="before:content-[attr(data-separator)] text-[14px] cursor-help comment-to" data-coid="${response.comment.coid}" data-cid="${response.comment.cid}" data-name="${response.comment.author}">${param.text}</span>
                            ${waiting}
                        </div>
                    </li>`);

                        } else {
                            // 如果没有coid，那么就在最下方显示评论框
                            document.querySelector('.comment-ul-cid-' + param.cid).insertAdjacentHTML('beforeend', `
                                <li class="pos-rlt comment-li-coid-${response.comment.coid}">
                    <div class="comment-body">
                        <span class="text-[14px] text-color-link">
                            <a href="${response.comment.url}" target="_blank" class="cursor-pointer text-color-link no-underline">${response.comment.author}</a>
                        </span>
                        <span data-separator=":" class="before:content-[attr(data-separator)] text-[14px] cursor-help comment-to" data-coid="${response.comment.coid}" data-cid="${response.comment.cid}" data-name="${response.comment.author}">${param.text}</span>
                        ${waiting}
                    </div>
                </li>
                                `);
                        }
                    } else {
                        // 评论异常，弹出进行提醒
                        alert('回复失败');
                    }
              },
              error: function(xhr, status, error) {
                console.log(error);
                // 处理错误
                alert('系统异常，请稍候重试');
              }
            });


        });

    });
}

/**
 * 获取评论框Html
 */
function getCommentFormHtml(cid, coid, name) {

    let author = window.localStorage.getItem('author');
    let mail = window.localStorage.getItem('mail');
    let url = window.localStorage.getItem('url');
    if (author == null) {
        author = '';
    }
    if (mail == null) {
        mail = '';
    }
    if (url == null) {
        url = '';
    }

    let placeholder = '回复内容';
    if (coid) {
        placeholder = '回复@' + name;
    }
    return `
    <li class="comment-form" data-cid="${cid}" data-coid="${coid}">
    <div class="bg-white p-2 rounded-sm border-1 border-solid border-[#07c160]">
        <div class="grid grid-cols-3 gap-2">
            <input placeholder="昵称" class="border-0 outline-none bg-color-primary p-1 rounded-sm input-author" data-cid="${cid}" data-coid="${coid}" value="${author}" />
            <input placeholder="网址" class="border-0 outline-none bg-color-primary p-1 rounded-sm input-url" data-cid="${cid}" data-coid="${coid}" value="${url}" />
            <input placeholder="邮箱" class="border-0 outline-none bg-color-primary p-1 rounded-sm input-mail" data-cid="${cid}" data-coid="${coid}" value="${mail}" />
        </div>
        <div class="mt-2">
            <input placeholder="${placeholder}" class="border-0 outline-none w-full rounded-sm p-1 input-text" data-cid="${cid}" data-coid="${coid}" />
        </div>
        <div class="flex justify-end mt-2">
            <div class="face mr-2 cursor-pointer"></div>
            <button class="btn-comment bg-[#07c160] border-0 outline-none text-white cursor-pointer rounded-sm" data-cid="${cid}" data-coid="${coid}">回复</button>
        </div>
    </div>
</li>
    `;
}

/**
 * 移除其他评论框
 */
function removeAllCommentForm() {
    $(".comment-form").remove();
}
</script>
第三步在把下面的代码添加到相关文件中,(一般index.php)，找到这段代码“<?php while ($this->next()):
?>//此次省略无数代码<?php endwhile; ?>”代码里面
<div class="index-comments">
<ul class="comment-ul-cid-<?php echo $this->cid; ?> comment-ul">
<?php foreach (listcomment($this->cid,6) as $comment): ?>
    <li class="pos-rlt comment-li-coid-<?php echo $comment['coid'] ?>">
        <div class="comment-body">
            <span class="text-color-link">
                <a href="<?php echo $comment['url'] ?>" target="_blank" class="text-color-link">
                    <?php echo $comment['author']; ?><?php if ($comment['authorId'] == $this->authorId) { ?><span class="zuozhe">作者</span><?php } ?>
                </a><?php echo reply($comment['parent'],$this->authorId);?>：
            </span>
            <span data-separator=":" class="comment-to" data-coid="<?php echo $comment['coid'] ?>" data-cid="<?php echo $comment['cid'] ?>" data-name="<?php echo $comment['author'] ?>">
                            <?php echo strip_tags(preg_replace("/<br>|<p>|<\/p>/", ' ', $comment['text'])) ?>
            </span>
        </div>
    </li>

<?php endforeach; ?>
</ul>
</div>
第四步把下面的代码添加到相关文件中（一般function.php）
// 主题初始化
function themeInit($self)
{
    $route = $self->request->getPathInfo();
    /* 主题开放API 路由规则 */
    if ($self->request->isPost()) {
        switch ($route) {
            case '/api/comment':
                addComment($self);
                break;
        }
    }
}
/**
 * 获取网站首页地址。
 */
function getWebsiteHomeUrl()
{
    $rewrite = Helper::options()->rewrite;
    $tmpUrl = Helper::options()->siteUrl;
    if (!$rewrite) {
        $tmpUrl = $tmpUrl . 'index.php';
    }
    return $tmpUrl;
}
/**
     * 用于列表文章查询相关文章评论
     * 通过文章cid查询评论数据函数
     * 参数一 文章cid 
     * 参数二 要查询多少条数据
    */
function listcomment($archive,$limits = 3){
    $db = Typecho_Db::get();
    return $db->fetchAll($db->select()->from('table.comments')
        ->where("cid = ? AND status = 'approved' AND type = 'comment'", $archive)
        ->limit($limits)->order('created', Typecho_Db::SORT_DESC)
    );
}

//评论加@或者回复
function reply($parent,$authorId) {
        if ($parent == 0) {
            return '';
        }

        $db = Typecho_Db::get();
        $commentInfo = $db->fetchRow($db->select('authorId,author,status,mail')->from('table.comments')->where('coid = ?', $parent));
        $zuozhe = "";

        if ($commentInfo['authorId'] == $authorId) {
            $zuozhe = "<span class='zuozhe'>作者</span>";
        }
        $link = ' 回复 <span class="huifu">'.$commentInfo['author'].$zuozhe.'</span>';
        return $link;
}


/**
 * 添加评论
 */
function addComment($self)
{
    $self->response->setStatus(200);
    $options = Helper::options();
    $user = Typecho_Widget::widget('Widget_User');
    $db = Typecho_Db::get();

    // // Security 验证不通过时会直接跳转，所以需要自己进行判断
    // // 需要开启反垃圾保护，此时将不验证来源
    // if ($self->request->get('_') != Helper::security()->getToken($self->request->getReferer())) {
    //     $self->response->throwJson(array('status' => 0, 'msg' => _t('非法请求')));
    // }

    /** 检查ip评论间隔 */
    if (!$user->pass('editor', true) && $self->authorId != $user->uid && $options->commentsPostIntervalEnable) {
        $latestComment = $db->fetchRow($db->select('created')->from('table.comments')
            ->where('cid = ?', $self->request->cid)
            ->where('ip = ?', $self->request->getIp())
            ->order('created', Typecho_Db::SORT_DESC)
            ->limit(1));

        if ($latestComment && ($options->gmtTime - $latestComment['created'] > 0 && $options->gmtTime - $latestComment['created'] < $options->commentsPostInterval)) {
            $self->response->throwJson(array('status' => 0, 'msg' => _t('对不起, 您的发言过于频繁, 请稍侯再次发布')));
        }
    }

    $comment = array(
        'cid' => $self->request->cid,
        'created' => $options->gmtTime,
        'agent' => $self->request->getAgent(),
        'ip' => $self->request->getIp(),
        'ownerId' => $self->author->uid,
        'type' => 'comment',
        'status' => $options->commentsRequireModeration ? 'waiting' : 'approved'
    );

    /** 判断父节点 */
    if ($parentId = $self->request->filter('int')->get('parent')) {
        if ($options->commentsThreaded && ($parent = $db->fetchRow($db->select('coid', 'cid')->from('table.comments')->where('coid = ?', $parentId))) && $self->request->cid == $parent['cid']) {
            $comment['parent'] = $parentId;
        } else {
            $self->response->throwJson(array('status' => 0, 'msg' => _t('父级评论不存在')));
        }
    }
    $feedback = Typecho_Widget::widget('Widget_Feedback');
    //检验格式
    $validator = new Typecho_Validate();
    $validator->addRule('author', 'required', _t('必须填写用户名'));
    $validator->addRule('author', 'xssCheck', _t('请不要在用户名中使用特殊字符'));
    $validator->addRule('author', array($feedback, 'requireUserLogin'), _t('您所使用的用户名已经被注册,请登录后再次提交'));
    $validator->addRule('author', 'maxLength', _t('用户名最多包含200个字符'), 200);

    if ($options->commentsRequireMail && !$user->hasLogin()) {
        $validator->addRule('mail', 'required', _t('必须填写电子邮箱地址'));
    }

    $validator->addRule('mail', 'email', _t('邮箱地址不合法'));
    $validator->addRule('mail', 'maxLength', _t('电子邮箱最多包含200个字符'), 200);

    if ($options->commentsRequireURL && !$user->hasLogin()) {
        $validator->addRule('url', 'required', _t('必须填写个人主页'));
    }
    $validator->addRule('url', 'url', _t('个人主页地址格式错误'));
    $validator->addRule('url', 'maxLength', _t('个人主页地址最多包含200个字符'), 200);

    $validator->addRule('text', 'required', _t('必须填写评论内容'));

    $comment['text'] = $self->request->text;

    /** 对一般匿名访问者,将用户数据保存一个月 */

    if (!$user->hasLogin()) {
        /** Anti-XSS */
        $comment['author'] = $self->request->filter('trim')->author;
        $comment['mail'] = $self->request->filter('trim')->mail;
        $comment['url'] = $self->request->filter('trim')->url;

        /** 修正用户提交的url */
        if (!empty($comment['url'])) {
            $urlParams = parse_url($comment['url']);
            if (!isset($urlParams['scheme'])) {
                $comment['url'] = 'http://' . $comment['url'];
            }
        }

        $expire = $options->gmtTime + $options->timezone + 30 * 24 * 3600;
        Typecho_Cookie::set('__typecho_remember_author', $comment['author'], $expire);
        Typecho_Cookie::set('__typecho_remember_mail', $comment['mail'], $expire);
        Typecho_Cookie::set('__typecho_remember_url', $comment['url'], $expire);
    } else {
        $comment['author'] = $user->screenName;
        $comment['mail'] = $user->mail;
        $comment['url'] = $user->url;

        /** 记录登录用户的id */
        $comment['authorId'] = $user->uid;
    }

    /** 如果系统设置为不需要审核，并且评论者之前须有评论通过了审核 */
    if (!$options->commentsRequireModeration && $options->commentsWhitelist) {
        if ($feedback->size($feedback->select()->where('author = ? AND mail = ? AND status = ?', $comment['author'], $comment['mail'], 'approved'))) {
            $comment['status'] = 'approved'; // 评论者之前有评论通过了审核设置为审核通过
        } else {
            $comment['status'] = 'waiting'; //  没有的话评论设置为待审核
        }
    }

    if ($error = $validator->run($comment)) {
        $self->response->throwJson(array('status' => 0, 'msg' => implode(';', $error)));
    }

    /** 添加评论 */
    $commentId = $feedback->insert($comment);
    if (!$commentId) {
        $self->response->throwJson(array('status' => 0, 'msg' => _t('评论失败')));
    }
    Typecho_Cookie::delete('__typecho_remember_text');
    $db->fetchRow($feedback->select()->where('coid = ?', $commentId)
        ->limit(1), array($feedback, 'push'));
    // 返回评论数据
    $data = array(
        'cid' => $feedback->cid,
        'coid' => $feedback->coid,
        'parent' => $feedback->parent,
        'mail' => $feedback->mail,
        'url' => $feedback->url,
        'ip' => $feedback->ip,
        'agent' => $feedback->agent,
        'author' => $feedback->author,
        'authorId' => $feedback->authorId,
        'permalink' => $feedback->permalink,
        'created' => $feedback->created,
        'datetime' => $feedback->date->format('Y-m-d H:i:s'),
        'status' => $feedback->status,
    );
    // 评论内容
    ob_start();
    $feedback->content();
    $data['content'] = ob_get_clean();

    $data['avatar'] = Typecho_Common::gravatarUrl($data['mail'], 48, Helper::options()->commentsAvatarRating, NULL, $self->request->isSecure());
    $self->response->throwJson(array('status' => 1, 'comment' => $data));
}

此处代码取自icefox主题地址：https://github.com/xiaopanglian/icefox/

列表 评论 无刷新
0 赞 or 打赏
喜欢就打赏一点
微信 支付宝
上一篇

又是抄袭修改表情头像的一天

下一篇

给你的主题添加一个代码高亮功能

已有12 条评论，0 个点赞
  1. 林风的头像
    林风

    2个月前 . LV.0

    博主，新年好，我用了上述代码，但是为啥提交之后没有写入数据库，只在页面上有显示，控制台也不报错，就是没有插入数据库偷偷看

    Windows Chrome 江苏省无锡市
    1. 寻梦xunm的头像
      寻梦xunm 作者博主

      2个月前 . LV.0

      @林风

      如何你网站开启了调试模式就会提交不成功，看一看根目录下面config.inc.php文件中是否有这段代码“define('__TYPECHO_DEBUG__', TRUE);”有的话注释掉或者删除。

      Windows 火狐浏览器 重庆市
  2. 小归客的头像
    小归客

    3个月前 . LV.0

    真666

    Android Chrome 浙江省温州市
    1. 寻梦xunm的头像
      寻梦xunm 作者博主

      3个月前 . LV.0

      @小归客

      用别人写的代码水的文章

      Android 夸克浏览器 重庆市
  3. kk的头像
    kk

    3个月前 . LV.0

    你都叫我王子了我能不来吗倚墙笑

    Android QQ浏览器 甘肃省
    1. 寻梦xunm的头像
      寻梦xunm 作者博主

      3个月前 . LV.0

      @kk

      滑稽

      Android 夸克浏览器 重庆市
  4. 山猫日记的头像
    山猫日记

    3个月前 . LV.1

    又是来大佬网站打卡的一天。唱歌

    Windows Chrome 广东省广州市
    1. 寻梦xunm的头像
      寻梦xunm 作者博主

      3个月前 . LV.0

      @山猫日记

      感谢IP

      Android 夸克浏览器 重庆市
  5. Q的头像
    Q

    3个月前 . LV.0

    Hhhhh你好

    iPhone QQ浏览器 江苏省南京市
    1. 寻梦xunm的头像
      寻梦xunm 作者博主

      3个月前 . LV.0

      @Q

      你好

      Android 夸克浏览器 重庆市
  6. 晨狐戏语的头像
    晨狐戏语

    3个月前 . LV.0

    get一个新姿势

    iPhone QQ浏览器 河南省驻马店市
    1. 寻梦xunm的头像
      寻梦xunm 作者博主

      3个月前 . LV.0

      @晨狐戏语

      嘿嘿

      Android 夸克浏览器 重庆市
隐私

Q Q:1340326824

vipshiyi@qq.com

QQ群：422720328

我的音乐

生活所迫，再见了苦逼的BUG们，以后有缘在会吧。