Typecho实现文章点赞功能

前言

应 @森木志姥爷 要挟!特此水一篇折腾记录-Typecho实现文章点赞,当时也懒得记录,现在觉得有必要记录一下。

过程

首先找到functions.php,加入以下函数
已标注相关注释(且经过@陆之岇 优化):

function agreeNum($cid, &$record = NULL)
{
    $db = Typecho_Db::get();
    $callback = array(
        'agree' => 0,
        'recording' => false
    );

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

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

    //  返回
    return $callback;
}

function agree($cid)
{
    $db = Typecho_Db::get();
    $callback = agreeNum($cid, $record);

    //  获取点赞记录的 Cookie
    //  判断 Cookie 是否存在
    if (empty($record)) {
        //  如果 cookie 不存在就创建 cookie
        Typecho_Cookie::set('__typecho_agree_record', "[$cid]");
    } else {
        //  判断文章是否点赞过
        if ($callback['recording']) {
            //  如果当前文章的 cid 在 cookie 中就返回文章的赞数,不再往下执行
            return $callback['agree'];
        }
        //  添加点赞文章的 cid
        array_push($record, $cid);
        //  保存 Cookie
        Typecho_Cookie::set('__typecho_agree_record', json_encode($record));
    }

    //  更新点赞字段,让点赞字段 +1
    $db->query('UPDATE `' . $db->getPrefix() . 'contents` SET `agree` = `agree` + 1 WHERE `cid` = ' . $cid . ';');

    //  返回点赞数量
    return ++$callback['agree'];
}

然后找到post.php在顶部加入以下代码用于判断是否是点赞的 POST 请求:

if (isset($_POST['agree'])) {
    //  判断 POST 请求中的 cid 是否是本篇文章的 cid
    if ($_POST['agree'] == $this->cid) {
        //  调用点赞函数,传入文章的 cid,然后通过 exit 输出点赞数量
        exit( strval(agree($this->cid)) );
    }
    //  如果点赞的文章 cid 不是本篇文章的 cid 就输出 error 不再往下执行
    exit('error');
}

接下来在该页面加入点赞按钮(按钮样式自行修改):

<?php $agree = $this->hidden?array('agree' => 0, 'recording' => true):agreeNum($this->cid); ?>
<button <?php echo $agree['recording']?'disabled':''; ?> type="button" id="agree" data-cid="<?php echo $this->cid; ?>" data-url="<?php $this->permalink(); ?>" class="btn btn-w-md btn-round btn-secondary">
   <span>点赞</span>
   <span class="agree-num"><?php echo $agree['agree']; ?></span>//点赞数量
</button>

最后Ajax点赞:
以下js代码添加至footer.php中,

//  点赞按钮点击
$('#agree').on('click', function () {

    //  发送 AJAX 请求
    $.ajax({
      //  请求方式 post
      type: 'post',
      //  url 获取点赞按钮的自定义 url 属性
      url: $('#agree').attr('data-url'),
      //  发送的数据 cid,直接获取点赞按钮的 cid 属性
      data: 'agree=' + $('#agree').attr('data-cid'),
      async: true,
      timeout: 30000,
      cache: false,
      //  请求成功的函数
      success: function (data) {
        var re = /\d/;  //  匹配数字的正则表达式
        //  匹配数字
        if (re.test(data)) {
          //  把点赞按钮中的点赞数量设置为传回的点赞数量
          $('#agree .agree-num').html(data);
        }
        
          //这里可以添加点赞成功后的效果代码,根据自身需求添加
          
          $('#agree').get(0).disabled = true;  //  禁用点赞按钮
      },
      error: function () {
        //  如果请求出错就恢复点赞按钮
        $('#agree').get(0).disabled = false;
      },
    });
  });
  

End...

请各位路过的姥爷食用!

Comments ( 19 评论)

wave
  1. 彼岸临窗

    38天前

    你博客的点赞提示怎么弄的,太好看了,出个教程吧~

    Windows 10 · Google Chrome
    1. 若志奕鑫 博主

      37天前

      @彼岸临窗 ,我用到的是https://github.com/mouse0270/bootstrap-notify
      这个插件,可以看官方文档,在ajax点赞后调用就OK了

      Android · Google Chrome
  2. 油油

    41天前

    支持支持

    Windows 10 · Google Chrome
    1. 若志奕鑫 博主

      41天前

      @油油

      Windows 10 · Google Chrome
  3. 浅小沫

    43天前

    如果我禁用了cookie是不是可以无限点赞了。🙃🙃

    MacOS · Safari
    1. 若志奕鑫 博主

      43天前

      @浅小沫

      Windows 10 · Google Chrome
      1. 浅小沫

        42天前

        @若志奕鑫 heo的表情包很不错。

        MacOS · Google Chrome
        1. 若志奕鑫 博主

          42天前

          @浅小沫 ,嗯哼

          Windows 10 · Google Chrome
      2. 2broear

        42天前

        @若志奕鑫 ,给他加个ip验证

        Windows 10 · Google Chrome
        1. 若志奕鑫 博主

          42天前

          @2broear 这样挺好,你那个中指才舒服

          Windows 10 · Google Chrome
      3. 浅小沫

        43天前

        @若志奕鑫 ,给你刷个999😘😘

        MacOS · Safari
        1. 若志奕鑫 博主

          43天前

          @浅小沫

          Windows 10 · Google Chrome
  4. zlprime

    43天前

    牛逼

    Windows 10 · Google Chrome
    1. 若志奕鑫 博主

      43天前

      @zlprime

      Windows 10 · Google Chrome
  5. 马内

    45天前

    我用WordPress,不过,现在Typecho确实很火。

    Windows 7 · Google Chrome
    1. BertWaver

      43天前

      @马内 ,我怎么感觉还是用WordPress的多?可能个人更多用的是typecho吧!

      Android · Google Chrome
    2. 若志奕鑫 博主

      45天前

      @马内 还好

      Windows 10 · Google Chrome
      1. END

        43天前

        @若志奕鑫 ,偏向写作的都转typecho了。

        Windows 10 · Google Chrome
        1. 浅小沫

          43天前

          @END ,Wordpress还行哦。

          MacOS · Safari
私密评论

搜索