不用插件Typecho实现文章点赞功能

第1步:

打开主题下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'];
}

第2步:

然后打开主题下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');
}

第3步:

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

<?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>

第4步:

将以下js代码添加至footer.php中(或js文件中),

//  点赞按钮点击
$('#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;
      },
    });
  });

本文转载自:https://cloud.tencent.com/developer/article/1923552

版权声明:转载或引用请注明出处

点赞 7

添加新评论

验证码: