目的地-Destination 前程似锦、未来可期、寻得良人、共赴白头,祝你也祝我。
博主 目的地-Destination
沪ICP备16003146号-2沪公网安备 31010702004922号萌ICP备20238488号博主 昨天 20:18 在线自豪地使用 Typecho 建站搭配使用 🌻Sunny 主题当前在线 1 人
歌曲封面 未知作品

沪ICP备16003146号-2

沪公网安备 31010702004922号

萌ICP备20238488号

网站已运行 7 年 325 天 0 小时 43 分

Powered by Typecho & Sunny

2 online · 49 ms

Title

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

Chrison

·

·

186次阅读
烂笔头
Article
⚠️ 本文最后更新于2023年02月24日,已经过了589天没有更新,若内容或图片失效,请留言反馈

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

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

参考文章1
参考文章2

修改function.php文件

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

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

上下两种均可

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

增加方法函数1

♾️ text 代码:
/* 获取评论点赞数量 */
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

♾️ text 代码:
/* 评论点赞处理 */
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中需要增加点赞按钮的地方新增一下代码,样式自行编辑

♾️ text 代码:
<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代码

♾️ text 代码:
<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 处改为:
♾️ text 代码:
if ($archive->request->is("commentLike")) {
  //功能处理函数 - 评论点赞
  commentLikes($archive);
}
现在已有 25 条评论,0 人点赞
Comment:共25条
发表
  1. 头像
    @
    Call to undefined function   commentLikes()大佬您好,点赞无效,显示如上错误,请问如何解决,不胜感激
    · Chrome · 中国移动

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    1. 头像
      @
      提示没有commentLikes 方法啊,你加了吗
      · 火狐浏览器 · 中国江苏省无锡市电信

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  2. 头像
    @
    海角七号
    哇哦
    · Chrome · 中国江苏省苏州市电信

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  3. 头像
    @

    好友

    荒野孤灯
    我现在的代码邮件你了
    现在是点赞没反应
    忘了昨天怎么弄的!@##$
    · Chrome · 中国湖北省黄石市电信

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    1. 头像
      @
      海角七号 @荒野孤灯
      1
      · Chrome · 中国江苏省苏州市电信

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    2. 头像
      @
      `
      · 火狐浏览器 · 中国江苏省苏州市电信

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    3. 头像
      @
      独立页面的JS:
      请求地址改成:`url: "?commentLike=dz",`fuction.php 的 themeInit 处改成:
      if ($archive->request->is("commentLike=dz")) {
      //功能处理函数 - 评论点赞
      commentLikes($archive);
      }
      · 火狐浏览器 · 中国江苏省苏州市电信

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    4. 头像
      @
      解决了
      · 火狐浏览器 · 中国江苏省苏州市电信

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    5. 头像
      @
      但你昨天起码是好的
      · 火狐浏览器 · 中国江苏省苏州市电信

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
      1. 头像
        @
        荒野孤灯 @Chrison
        现在不好了,忘了昨天咋弄的
        · Chrome · 中国湖北省武汉市联通

        👍

        💖

        💯

        💦

        😄

        🪙

        👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    6. 头像
      @
      我是真想不通了。。。总不能是这个主题哪里有不兼容吧
      · 火狐浏览器 · 中国江苏省苏州市电信

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
      1. 头像
        @
        荒野孤灯 @Chrison
        是不是跟文章的点赞冲突了
        · Chrome · 中国湖北省武汉市联通

        👍

        💖

        💯

        💦

        😄

        🪙

        👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
        1. 头像
          @
          你是换了个邮箱吗,昨天都没注意有两个未审核的
          · 火狐浏览器 · 中国江苏省苏州市电信

          👍

          💖

          💯

          💦

          😄

          🪙

          👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  4. 头像
    @

    好友

    荒野孤灯
    if ($archive->request->getPathInfo() == "/getComment/dz") {
    · Chrome · 中国湖北省黄石市电信

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    1. 头像
      @
      themeInit 这一段函数 都截图给我看看吧
      · 火狐浏览器 · 中国江苏省苏州市电信

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
      1. 头像
        @
        https://s1.ax1x.com/2023/02/22/pSvau8O.png
        · Chrome · 中国湖北省黄石市电信

        👍

        💖

        💯

        💦

        😄

        🪙

        👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
        1. 头像
          @
          ???你改了 又好了?
          · 火狐浏览器 · 中国江苏省苏州市电信

          👍

          💖

          💯

          💦

          😄

          🪙

          👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
          1. 头像
            @
            我也是见鬼了。
            http://akina.chrison.cn/guests.html
            这个主题上,死活找不到路由
            · 火狐浏览器 · 中国江苏省苏州市电信

            👍

            💖

            💯

            💦

            😄

            🪙

            👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
          2. 头像
            @
            或者你先按你昨天的方法弄,然后再修改
            · 火狐浏览器 · 中国江苏省苏州市电信

            👍

            💖

            💯

            💦

            😄

            🪙

            👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
          3. 头像
            @
            该回复疑似异常,已被系统拦截!
            · Chrome · 中国湖北省黄石市电信

            👍

            💖

            💯

            💦

            😄

            🪙

            👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
          4. 头像
            @
            我改到仙人掌主题上,会找不到路由地址。、。。。。
            · 火狐浏览器 · 中国江苏省苏州市电信

            👍

            💖

            💯

            💦

            😄

            🪙

            👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
          5. 头像
            @
            对啊 很奇怪
            · Chrome · 中国湖北省黄石市电信

            👍

            💖

            💯

            💦

            😄

            🪙

            👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
          6. 头像
            @
            你一部分 一部分的加,看看
            还是说 一到themeInit那,就报错?
            · 火狐浏览器 · 中国江苏省苏州市电信

            👍

            💖

            💯

            💦

            😄

            🪙

            👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
          7. 头像
            @
            没改啊 恢复 了 不正常啊
            忘了昨天怎么搞的
            · Chrome · 中国湖北省黄石市电信

            👍

            💖

            💯

            💦

            😄

            🪙

            👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  5. 头像
    @

    好友

    荒野孤灯
    帮忙看看
    · Chrome · 中国湖北省黄石市电信

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
搜 索 消 息 足 迹
你还不曾留言过..
你还不曾留下足迹..
博主 不再显示
博主