1

通过函数给Typecho博客添加点赞功能

 2 years ago
source link: https://www.huhexian.com/19915.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

通过函数给Typecho博客添加点赞功能

青山 2021-12-2816:07:2123014字

众所周知，Typecho默认是没有提供点赞相关的插件的，想要实现点赞功能需要自己开发或者用别人完善好的主题。以下即为Typecho点赞功能的相关开发。

首先找到functions.php，加入以下函数：

  1. function agreeNum($cid, &$record = NULL)
  2. $db = Typecho_Db::get();
  3. $callback = array(
  4. 'agree' => 0,
  5. 'recording' => false
  6. // 判断点赞数量字段是否存在
  7. if (array_key_exists('agree', $data = $db->fetchRow($db->select()->from('table.contents')->where('cid = ?', $cid)))) {
  8. // 查询出点赞数量
  9. $callback['agree'] = $data['agree'];
  10. } else {
  11. // 在文章表中创建一个字段用来存储点赞数量
  12. $db->query('ALTER TABLE `' . $db->getPrefix() . 'contents` ADD `agree` INT(10) NOT NULL DEFAULT 0;');
  13. // 获取记录点赞的 Cookie
  14. // 判断记录点赞的 Cookie 是否存在
  15. if (empty($recording = Typecho_Cookie::get('__typecho_agree_record'))) {
  16. // 如果不存在就写入 Cookie
  17. Typecho_Cookie::set('__typecho_agree_record', '[]');
  18. } else {
  19. $callback['recording'] = is_array($record = json_decode($recording)) && in_array($cid, $record);
  20. return $callback;
  21. function agree($cid)
  22. $db = Typecho_Db::get();
  23. $callback = agreeNum($cid, $record);
  24. // 获取点赞记录的 Cookie
  25. // 判断 Cookie 是否存在
  26. if (empty($record)) {
  27. // 如果 cookie 不存在就创建 cookie
  28. Typecho_Cookie::set('__typecho_agree_record', "[$cid]");
  29. } else {
  30. // 判断文章是否点赞过
  31. if ($callback['recording']) {
  32. // 如果当前文章的 cid 在 cookie 中就返回文章的赞数，不再往下执行
  33. return $callback['agree'];
  34. // 添加点赞文章的 cid
  35. array_push($record, $cid);
  36. // 保存 Cookie
  37. Typecho_Cookie::set('__typecho_agree_record', json_encode($record));
  38. // 更新点赞字段，让点赞字段 +1
  39. $db->query('UPDATE `' . $db->getPrefix() . 'contents` SET `agree` = `agree` + 1 WHERE `cid` = ' . $cid . ';');
  40. // 返回点赞数量
  41. return ++$callback['agree'];
  42. 然后找到post.php在顶部加入以下代码用于判断是否是点赞的 POST 请求：
  43. if (isset($_POST['agree'])) {
  44. // 判断 POST 请求中的 cid 是否是本篇文章的 cid
  45. if ($_POST['agree'] == $this->cid) {
  46. // 调用点赞函数，传入文章的 cid，然后通过 exit 输出点赞数量
  47. exit( strval(agree($this->cid)) );
  48. // 如果点赞的文章 cid 不是本篇文章的 cid 就输出 error 不再往下执行
  49. exit('error');

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

通过函数给Typecho博客添加点赞功能

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

以下js代码添加至footer.php中

  1. <script>
  2. // 点赞按钮点击
  3. $('#agree').on('click', function () {
  4. // 发送 AJAX 请求
  5. $.ajax({
  6. // 请求方式 post
  7. type: 'post',
  8. // url 获取点赞按钮的自定义 url 属性
  9. url: $('#agree').attr('data-url'),
  10. // 发送的数据 cid，直接获取点赞按钮的 cid 属性
  11. data: 'agree=' + $('#agree').attr('data-cid'),
  12. async: true,
  13. timeout: 30000,
  14. cache: false,
  15. // 请求成功的函数
  16. success: function (data) {
  17. var re = /\d/; // 匹配数字的正则表达式
  18. // 匹配数字
  19. if (re.test(data)) {
  20. // 把点赞按钮中的点赞数量设置为传回的点赞数量
  21. $('#agree .agree-num').html(data);
  22. //这里可以添加点赞成功后的效果代码，根据自身需求添加
  23. $('#agree').get(0).disabled = true; // 禁用点赞按钮
  24. error: function () {
  25. // 如果请求出错就恢复点赞按钮
  26. $('#agree').get(0).disabled = false;
  27. </script>

在post.php页面适当位置加入点赞按钮（按钮样式自行修改）：

  1. <span id="dream-info">
  2. <?php $agree = $this->hidden?array('agree' => 0, 'recording' => true):agreeNum($this->cid); ?>
  3. <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">
  4. <span class="agree-num"><?php echo $agree['agree']; ?></span>
  5. </button>
  6. </span>
  7. <!--msg弹窗js--->
  8. <script src="https://cdn.jsdelivr.net/gh/iGaoWei/Dream-Msg/lib/dream-msg.min.js"></script>
  9. <script>
  10. var info = document.getElementById("dream-info");
  11. info.onclick = function(){
  12. Dreamer.info("点赞成功！谢谢您对[旧时光]的大力支持~");
  13. </script>
  14. <!--msg弹窗js结束--->

通过函数给Typecho博客添加点赞功能

历史上的今天

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK