前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Typecho 给评论增加点赞/喜欢功能

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

作者头像
目的地-Destination
发布2023-03-06 15:40:46
8960
发布2023-03-06 15:40:46
举报
文章被收录于专栏:目的地-Destination

之前换了主题以后,重新给文章增加了点赞功能。 那么又如何给每一条评论都增加点赞功能呢?参考了以下两篇文章后,重新做了调整。增加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);
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023年02月24日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 修改function.php文件
  • 编辑独立页面
    • $("#comments-ajax") 代表整个评论区最外层的id是comments-ajax的标签,请自行修改。
    • 特别注意
      • 若出现点击“赞”无效;F12查看网络请求后,显示 Path '/getComment/dz' not found 时
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档