typecho 实现评论Cookie点赞功能

搞了一个动态发布页面，之前已经有了回复功能，总觉得还差点什么，折腾了好长时间，终于把遗缺的点赞功能加上了。

先看效果

https://xwsir.cn/talk.html

后端处理

1、 在核心文件 core.php 的初始化函数 function themeInit($self) 下添加

if ($self->request->isPost() && $self->request->is('action=support')) {
        $res = _addSupport($self->request->get('coid'));
        $json = [
            'success' => $res ? true : false,
            'count' => $res
        ];
        ob_clean();
        echo json_encode($json);
        exit();
    }

2、 在公用函数 function.php 中末尾地方添加

function _getSupport($coid)
{
    $db = Typecho_Db::get();
    $prefix = $db->getPrefix();
    if (!array_key_exists('support', $db->fetchRow($db->select()->from('table.comments')))) {
        $db->query('ALTER TABLE `' . $prefix . 'comments` ADD `support` INT(10) DEFAULT 0;');
        return [
            'icon' => 'icon-unlike',
            'count' => 0,
            'text' => '点赞'
        ];
    }
    $row = $db->fetchRow($db->select('support')->from('table.comments')->where('coid = ?', $coid));
    $support = Typecho_Cookie::get('extend_comments_support');
    if (empty($support)) {
        $support = array();
    } else {
        $support = explode(',', $support);
    }
    if (!in_array($coid, $support)) {
        return [
            'icon' => 'icon-unlike',
            'count' => $row['support'],
            'text' => '点赞'
        ];
    } else {
        return [
            'icon' => 'icon-like',
            'count' => $row['support'],
            'text' => '已赞'
        ];
    }
}
function _addSupport($coid)
{
    $db = Typecho_Db::get();
    $row = $db->fetchRow($db->select('support')->from('table.comments')->where('coid = ?', $coid));
    $support = Typecho_Cookie::get('extend_comments_support');
    if (empty($support)) {
        $support = array();
    } else {
        $support = explode(',', $support);
    }
    if (!in_array($coid, $support)) {
        $db->query($db->update('table.comments')->rows(array('support' => (int)$row['support'] + 1))->where('coid = ?', $coid));
        array_push($support, $coid);
        $support = implode(',', $support);
        Typecho_Cookie::set('extend_comments_support', $support);
        return $row['support'] + 1;
    } else {
        return false;
    }
}

前端处理
----php

1、 在需要显示的页面中添加

<div class="item">
    <?php $suport = _getSupport($comments->coid) ?>
    <i class="iconfont <?php echo $suport['icon'] ?>">
        <a class="support" data-coid="<?php echo $comments->coid ?>" href="javascript:void (0)">
            <?php echo '(' . $suport['count'] . ')' . $suport['text'] ?>
        </a>
    </i>
</div>

2、 在 js 处理文件中添加

$('.support').on('click', function () {
    $.ajax({
        url: `/?action=support`,
        type: 'POST',
        data: {
            coid: $(this).data('coid')
        },
        dataType: 'json',
        success: res => {
            if (res.success) {
                Qmsg.success('谢谢点赞~');
                $(this).parent().removeClass('icon-unlike').addClass('icon-like');
                $(this).text('(' + res.count + ')' + '已赞');
            } else {
                Qmsg.warning('您已赞过~');
            }
        }
    });
});

3、 在 css 样式文件中添加

.item {
    .support {
        font-size: 14px;
        color: var(--minor);
        &:hover {
            color: var(--theme);
        }
    }
    .icon-like {
        &:before {
            color: var(--theme);
        }
    }
}

4、 引入图标库文件，这里用到是阿里巴巴图标库

<link rel="stylesheet" href="//at.alicdn.com/t/font_2524811_dm4ygqk8eqo.css">