Typecho 给评论增加点赞/喜欢功能

2023-03-06 15:40:46 浏览数 (1)

之前换了主题以后，重新给文章增加了点赞功能。 那么又如何给每一条评论都增加点赞功能呢？参考了以下两篇文章后，重新做了调整。增加cookie，防止重复点赞。

目前该功能仅在【说说】界面。传送门：点击查看说说页面

参考文章1 参考文章2

修改function.php文件

找到themeInit函数，如没有，则自行编辑

代码语言：javascript复制
function themeInit($self){
　　//创建一个路由
    if ($self->request->getPathInfo() == "/getComment/dz") {
        //功能处理函数 - 评论点赞
        commentLikes($self);
    }
}

上下两种均可

function themeInit($archive){
　　//创建一个路由
    if ($archive->request->getPathInfo() == "/getComment/dz") {
        //功能处理函数 - 评论点赞
        commentLikes($archive);
    }
}

增加方法函数1

代码语言：javascript复制
/* 获取评论点赞数量 */
function commentLikesNum($coid, &$record = NULL)
{
    $db = Typecho_Db::get();
    $callback = array(
        'likes' => 0,
        'recording' => false
    );

    //  判断点赞数量字段是否存在
    if (array_key_exists('likes', $data = $db->fetchRow($db->select()->from('table.comments')->where('coid = ?', $coid)))) {
        //  查询出点赞数量
        $callback['likes'] = $data['likes'];
    } else {
        //  在文章表中创建一个字段用来存储点赞数量
        $db->query('ALTER TABLE `' . $db->getPrefix() . 'comments` ADD `likes` INT(10) NOT NULL DEFAULT 0;');
    }

     //获取记录点赞的 Cookie
     //判断记录点赞的 Cookie 是否存在
    if (empty($recording = Typecho_Cookie::get('__typecho_comment_likes_record'))) {
        //  如果不存在就写入 Cookie
        Typecho_Cookie::set('__typecho_comment_likes_record', '[]');
    } else {
        $callback['recording'] = is_array($record = json_decode($recording)) && in_array($coid, $record);
    }

    //  返回
    return $callback;
}

增加方法函数2

代码语言：javascript复制
/* 评论点赞处理 */
function commentLikes($archive)
{
    
    // 状态
    $archive->response->setStatus(200); 
    
    
    //评论id
    $_POST['coid'];
    
    /**
     * 行为
     * dz  进行点赞
     * ct  进行踩踏
    **/
    $_POST['behavior'];
    
    
    //判断是否为登录 true 为已经登录
    $loginState = Typecho_Widget::widget('Widget_User')->hasLogin();
    
    $res1 = commentLikesNum($_POST['coid'], $record);
    
    $num = 0;
    
    if(!empty($_POST['coid']) && !empty($_POST['behavior'])){
    
        $db = Typecho_Db::get();
        $prefix = $db->getPrefix();
        $coid = (int)$_POST['coid'];
        
        if (!array_key_exists('likes', $db->fetchRow($db->select()->from('table.comments')))) {
        $db->query('ALTER TABLE `' . $prefix . 'comments` ADD `likes` INT(30) DEFAULT 0;');
        }
        
        //先获取当前赞
        $row = $db->fetchRow($db->select('likes')->from('table.comments')->where('coid = ?', $coid));
        
        $updateRows = $db->query($db->update('table.comments')->rows(array('likes' => (int) $row['likes']   1))->where('coid = ?', $coid));

    
        if($updateRows){
            $num = $row['likes']   1;
            $state =  "success";
            
            //  添加点赞评论的 coid
            array_push($record, $coid);
            //  保存 Cookie
            Typecho_Cookie::set('__typecho_comment_likes_record', json_encode($record));
        }else{
            $num = $row['likes'];
            $state =  "error";
        }
        
    }else{
        $state = 'Illegal request';
    }  

    //返回一个jsonv数据state数据
    $archive->response->throwJson(array(
       "state" => $state,
       "num" => $num
    ));    

}

编辑独立页面

HTML中需要增加点赞按钮的地方新增一下代码，样式自行编辑

代码语言：javascript复制
<div class="right">
    <!-- 评论点赞次数 -->
    <?php 
        $commentLikes =commentLikesNum($comments->coid); 
        $commentLikesNum = $commentLikes['likes'];
        $commentLikesRecording= $commentLikes['recording'];
    ?>
    <div class="commentLike">
        <a class="commentLikeOpt" id="commentLikeOpt-<?php $comments->coid(); ?>" href="javascript:;" data-coid="<?php $comments->coid() ?>" data-recording="<?php echo $commentLikesRecording; ?>">
        <i id="commentLikeI-<?php $comments->coid(); ?>" class="<?php echo $commentLikesRecording?'st fa fa-heart':'st fa fa-heart-o'; ?>"></i
        <span id="commentLikeSpan-<?php $comments->coid(); ?>"><?php echo $commentLikesNum ?></span>
        </a>
    </div>
</div>

HTML中增加js代码

代码语言：javascript复制
<script>
    $("#comments-ajax").on('click', "a[id^='commentLikeOpt']", function() {
        
           var coid = $(this).data("coid");
           var recording = $(this).attr("data-recording");
           
           if(recording){
               alert("你已经点过赞啦！感谢你的喜爱！");
               return;
           }

            $.ajax({
                url: "<?php Helper::options()->index("/getComment/dz"); ?>",
                type: "POST",
                data: {
                    coid:coid,
                    behavior:'dz'
                },
                async: true,
                dataType: "json",
                success: function(data) {
                    if (data == null) {} else {
                        if(data.state == 'success'){
                            alert("点赞成功");
                            //修改点赞数量
                            $('#commentLikeSpan-' coid).html(data.num);
                            //变更点赞图标样式
                            $('#commentLikeI-' coid).removeAttr("class","st fa-regular fa-heart")
                            $('#commentLikeI-' coid).attr("class","st fa-solid fa-heart")
                            //设置recording的属性值
                            $('#commentLikeI-' coid).parent().attr("data-recording","1");
                        }
                        
                    }
                },
                error: function(err) {}
            });
            
        })
</script>
$("#comments-ajax") 代表整个评论区最外层的id是comments-ajax的标签，请自行修改。

例如<ol class="comment-list" id="comments-ajax">

特别注意

若出现点击“赞”无效；F12查看网络请求后，显示 Path '/getComment/dz' not found 时
  1. JS代码中的url地址改为?commentLike
  2. themeInit 处改为：
代码语言：javascript复制
if ($archive->request->is("commentLike")) {
　　//功能处理函数 - 评论点赞
　　commentLikes($archive);
}
ajax 腾讯云开发者社区 html

0 人点赞