如何实现织梦列表页的顶(赞)和踩功能，并在用户顶过后进行标红高亮显示？

2024年10月26日 互联网
织梦列表页新增顶(赞)与踩功能，顶后内容标红高亮显示。

在织梦（DedeCMS）的内容管理系统中，实现列表页支持顶（赞）和踩功能，并且在用户顶过后标红高亮显示，是一个增强用户体验的常见需求，以下是详细的实现步骤和逻辑说明：

如何实现织梦列表页的顶(赞)和踩功能，并在用户顶过后进行标红高亮显示？

数据库设计

需要在数据库中添加两个字段来记录每个文章或内容的顶和踩的数量，可以在现有的内容表中添加两个字段：dianzan_count（点赞数）和cai_count（踩数）。

ALTER TABLEdede_archives ADDdianzan_count INT UNSIGNED NOT NULL DEFAULT '0' COMMENT '点赞数', ADDcai_count INT UNSIGNED NOT NULL DEFAULT '0' COMMENT '踩数';

修改模板文件

需要修改织梦列表页的模板文件（通常是list_article.htm），以便显示顶和踩的按钮以及相应的数量。

2.1 引入CSS样式

在模板文件的头部或者公共文件中引入CSS样式，用于标红高亮显示已经顶过的内容。

如何实现织梦列表页的顶(赞)和踩功能，并在用户顶过后进行标红高亮显示？

/* CSS样式 */
.dianzanhighlight {
    backgroundcolor: #FFCCCC;
}

2.2 修改列表页模板

在模板文件中找到合适的位置插入顶和踩的按钮以及数量显示，可以使用以下代码：

{dede:arclist typeid='1'}
    <li>
        <div class="article">
            <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
            <p>[field:description function='html2text(@me)'/]...</p>
            <div class="interaction">
                <span>点赞: <strong>[field:dianzan_count/]</strong></span>
                <span>踩: <strong>[field:cai_count/]</strong></span>
                <form action="{php echo $cfg_cmspath;}/plus/count.php?tid=[field:id function='abs(@me)'/]" method="post">
                    <input type="hidden" name="id" value="[field:id/]">
                    <input type="hidden" name="type" value="dianzan">
                    <button type="submit" class="dianzanbtn">点赞</button>
                </form>
                <form action="{php echo $cfg_cmspath;}/plus/count.php?tid=[field:id function='abs(@me)'/]" method="post">
                    <input type="hidden" name="id" value="[field:id/]">
                    <input type="hidden" name="type" value="cai">
                    <button type="submit" class="caibtn">踩</button>
                </form>
            </div>
        </div>
    </li>
{/dede:arclist}

编写处理逻辑

在plus/count.php文件中添加处理顶和踩的逻辑，这个文件通常位于织梦的plus目录下。

<?php
require_once '../include/common.inc.php';
if ($dopost == 'dianzan') {
    $id = intval($_POST['id']);
    $dsql = "UPDATEdede_archives SETdianzan_count =dianzan_count + 1 WHERE id = $id";
    // 执行SQL更新操作
    // ...
} elseif ($dopost == 'cai') {
    $id = intval($_POST['id']);
    $dsql = "UPDATEdede_archives SETcai_count =cai_count + 1 WHERE id = $id";
    // 执行SQL更新操作
    // ...
}
?>

为了实现高亮显示已点赞的内容，可以使用JavaScript来动态改变样式，在模板文件中加入以下JavaScript代码：

如何实现织梦列表页的顶(赞)和踩功能，并在用户顶过后进行标红高亮显示？

<script>
document.addEventListener("DOMContentLoaded", function() {
    const cookies = document.cookie.split(';');
    const userLikedIds = new Set();
    cookies.forEach(cookie => {
        if (cookie.startsWith('liked_')) {
            userLikedIds.add(cookie.split('=')[1]);
        }
    });
    const buttons = document.querySelectorAll('.dianzanbtn');
    buttons.forEach(button => {
        const articleId = button.getAttribute('dataid');
        if (userLikedIds.has(articleId)) {
            button.classList.add('dianzanhighlight');
        }
    });
});
</script>

在点赞按钮中添加一个dataid属性来存储文章ID：

<button type="submit" class="dianzanbtn" dataid="[field:id/]">点赞</button>

设置Cookie

当用户点赞时，还需要设置一个Cookie来记录用户的点赞行为，以便下次加载页面时可以高亮显示，在plus/count.php中添加设置Cookie的代码：

if ($dopost == 'dianzan') {
    // ... 其他代码 ...
    setcookie('liked_' . $id, 'true', time() + 3600 * 24 * 30); // Cookie有效期为30天
} elseif ($dopost == 'cai') {
    // ... 其他代码 ...
    setcookie('liked_' . $id, '', time()  3600); // 立即删除Cookie
}

通过以上步骤，可以实现织梦列表页支持顶（赞）和踩的功能，并且在用户顶过后标红高亮显示，这种实现方式不仅增强了用户体验，还增加了网站的互动性。

最新文章