这个功能在技术实现上，通常不是真正地去修改文章的排序，而是通过一个“顶/踩”计数器，来记录用户对某篇文章的喜好程度，并在列表页显示这个计数,作为一种参考和互动。
本教程将分为以下几个步骤：
- 数据库设计：创建用于存储顶/踩数据的表。
- 后端开发：
- 修改文章发布模型，增加顶/踩计数字段。
- 创建处理顶/踩请求的PHP文件。
- 修改
arc.listview.class.php文件，让列表页能读取到顶/踩数据。
- 前端开发：
- 修改列表页模板
list_article.htm，添加顶/踩的显示和点击事件。 - 编写jQuery代码，实现AJAX无刷新顶/踩。
- 修改列表页模板
第一步：数据库设计
我们需要一个地方来存储每篇文章的顶数和踩数，最简单的方式是直接在 dede_archives (文章主表) 中增加两个字段。
- 登录你的phpMyAdmin。
- 选择你的DedeCMS数据库。
- 点击
dede_archives表，选择“结构” -> “插入”。 - 添加以下两个字段：
| 字段名 | 类型 | 长度/值 | 整数长度 | 小数位数 | 允许NULL | 默认值 | 注释 |
|---|---|---|---|---|---|---|---|
diggtop |
mediumint | 8 | 否 | 0 | 顶数 | ||
diggdown |
mediumint | 8 | 否 | 0 | 踩数 |
注意：mediumint 类型足够存储很大的数字,通常够用了。
添加完字段后，你的 dede_archives 表就有了 diggtop 和 diggdown 这两个新列。
第二步：后端开发
1 修改文章发布模型（可选，但推荐）
虽然我们可以在后台手动添加，但最好的方式是在发布新文章时，就自动为这两个字段设置初始值 0。
-
打开文件
/dede/templets/article_add.htm(用于发布文章的模板)。 -
找到
<form>标签，在里面添加一个隐藏的输入字段,用于传递初始值：<input type="hidden" name="diggtop" value="0" /> <input type="hidden" name="diggdown" value="0" />
这一步是为了确保在
article_add.php中能接收到这两个值。
（图片来源网络，侵删） -
打开处理文章发布的文件
/dede/article_add.php。 -
找到
$query = "INSERT INTOdede_archives" 这段SQL插入语句。 -
在
arcID和typeid等字段后面，添加diggtop和diggdown：$query = "INSERT INTO `dede_archives`( `arctypeid`, `typeid`, `sortrank`, `flag`, `ismake`, `channel`, `senddate`, `mid`, `diggtop`, `diggdown`, ... ) VALUES ( '$typeid', '$typeid', '$sortrank', '$flag', '$ismake', '$channel', '$senddate', '$mid', '0', '0', ... )";注意：
'0', '0'是我们设置的默认值，这里我们直接写死，因为前面已经通过隐藏域传递了，但为了保险,直接写死也是可以的。
2 创建处理顶/踩的PHP文件
我们需要一个独立的PHP文件来接收AJAX请求,并更新数据库。
-
在
/plus/目录下创建一个新文件，命名为digg.php。 -
将以下代码复制到
digg.php中：<?php /** * DedeCMS 顶/踩处理文件 * 用于接收AJAX请求，更新文章的顶/踩数 */ // 引入数据库配置文件 require_once(dirname(__FILE__) . "/../include/common.inc.php"); // 获取参数 $aid = isset($aid) && is_numeric($aid) ? $aid : 0; // 文章ID $action = isset($action) && in_array($action, array('top', 'down')) ? $action : ''; // 动作：顶 或 踩 $typeid = isset($typeid) && is_numeric($typeid) ? $typeid : 0; // 栏目ID，用于权限判断（可选） // 基本验证 if ($aid <= 0 || empty($action)) { // 返回JSON格式的错误信息 header('Content-Type: application/json; charset=utf-8'); echo json_encode(array('success' => false, 'msg' => '参数错误')); exit; } // 防止重复提交（简单版，可以扩展为基于IP或Cookie的判断） // 这里为了演示，我们省略了，实际项目中建议加上 /* $cookieName = 'digg_' . $aid; if (isset($_COOKIE[$cookieName])) { header('Content-Type: application/json; charset=utf-8'); echo json_encode(array('success' => false, 'msg' => '您已经操作过了')); exit; } */ // 根据动作更新数据库 $field = $action === 'top' ? 'diggtop' : 'diggdown'; $sql = "UPDATE `dede_archives` SET `{$field}` = `{$field}` + 1 WHERE `id` = '{$aid}'"; $dsql->ExecuteNoneQuery($sql); // 获取更新后的值 $row = $dsql->GetOne("SELECT `diggtop`, `diggdown` FROM `dede_archives` WHERE `id` = '{$aid}'"); $diggtop = $row['diggtop']; $diggdown = $row['diggdown']; // 返回成功信息 header('Content-Type: application/json; charset=utf-8'); echo json_encode(array( 'success' => true, 'msg' => '操作成功', 'diggtop' => $diggtop, 'diggdown' => $diggdown )); exit; ?>
3 修改列表页类文件
要让列表页能显示 diggtop 和 diggdown 的值,我们需要修改生成列表页的核心类文件。
-
打开
/include/arc.listview.class.php。 -
找到
GetListField函数（通常在文件末尾）,这个函数负责决定列表页可以显示哪些字段。 -
在
GetListField函数中，找到$this->Fields[''] = '';这样的代码块,在其中添加我们的两个字段。// 在 GetListField 函数中添加 $this->Fields['diggtop'] = $row['diggtop']; $this->Fields['diggdown'] = $row['diggdown'];
注意：
$row是当前循环到的文章数据，我们从中取出diggtop和diggdown，并赋值给$this->Fields对象，这样，在模板文件中就可以通过{diggtop}和{diggdown}来调用它们了。
第三步：前端开发
现在我们来修改模板文件，让用户能看到并点击顶/踩。
-
打开你的列表页模板文件，通常位于
/templets/你的模板文件夹/list_article.htm。 -
在你希望显示顶/踩效果的地方（例如文章标题旁边或摘要下面）,添加以下HTML代码：
<div class="digg-area"> <span class="digg-item"> <a href="javascript:;" class="digg-top" data-aid="{id}" data-action="top"> <i class="fa fa-thumbs-up"></i> 顶 ({diggtop}) </a> </span> <span class="digg-item"> <a href="javascript:;" class="digg-down" data-aid="{id}" data-action="down"> <i class="fa fa-thumbs-down"></i> 踩 ({diggdown}) </a> </span> </div>{id}：文章ID,DedeCMS默认字段。{diggtop}和{diggdown}：我们在第二步中通过修改arc.listview.class.php添加的字段。data-aid和data-action：我们自定义的属性,方便jQuery获取文章ID和操作类型。
-
为了让效果更好，我们可以在模板的
<head>部分或引入CSS文件的地方,添加一些CSS样式：.digg-area { font-size: 12px; margin-top: 5px; } .digg-item a { color: #666; text-decoration: none; margin-right: 10px; transition: color 0.2s; } .digg-item a:hover { color: #ff6600; cursor: pointer; } .digg-item a.disabled { color: #ccc; cursor: not-allowed; } -
添加jQuery代码来处理点击事件，确保你的模板已经引入了jQuery库（通常在
head.htm中）。<script type="text/javascript"> $(function(){ $('.digg-top, .digg-down').on('click', function(){ var $this = $(this); var aid = $this.data('aid'); var action = $this.data('action'); // 防止重复点击 if ($this.hasClass('disabled')) { return false; } $this.addClass('disabled'); // 发送AJAX请求 $.ajax({ url: '/plus/digg.php', type: 'GET', data: { aid: aid, action: action }, dataType: 'json', success: function(res){ if (res.success) { // 更新页面上的数字 if (action == 'top') { $this.find('span').text(res.diggtop); } else { $this.find('span').text(res.diggdown); } // 可以在这里添加一个提示，如 alert('操作成功！'); } else { alert(res.msg); } }, error: function(){ alert('网络错误，请稍后重试！'); }, complete: function(){ // 无论成功失败，都移除disabled状态，以便可以再次操作（根据需求决定） // $this.removeClass('disabled'); } }); }); }); </script>注意：上面的jQuery代码中，我假设你的HTML结构是
<a ...><span>{diggtop}</span></a>，如果你直接把数字写在<a>标签里，<a ...>顶 ({diggtop})</a>，那么更新文本的代码需要调整为$this.text('顶 (' + res.diggtop + ')');。
总结与注意事项
- 功能流程：用户点击“顶” -> jQuery捕获事件 -> 向
/plus/digg.php发送请求 ->digg.php更新数据库 -> 返回新数据 -> jQuery更新页面显示。 - 防止作弊：当前的
digg.php没有做任何限制，用户可以无限次点击，在实际项目中，你应该增加防作弊机制，- 基于IP：记录用户IP，每个IP每天只能顶/踩一次。
- 基于Cookie：在用户点击后，设置一个长期有效的Cookie,防止同一浏览器重复点击。
- 需要登录：只有登录用户才能操作。
- 性能：如果网站流量很大，频繁的数据库写入操作可能会影响性能,可以考虑使用缓存或队列来处理。
- 样式：顶/踩后的样式变化（如变灰、禁用）可以做得更美观,提升用户体验。
按照以上步骤，你就可以成功地在DedeCMS列表页实现一个完整的“顶/踩”功能了，这个教程涵盖了从数据库到后端再到前端的全部开发过程,希望能对你有所帮助。
