dede评论回复样式如何自定义修改？-DEDE建站-盈思创科技

DedeCMS 的评论功能分为两种：

（图片来源网络，侵删）

对主评论的回复：即用户对文章、图集等内容的直接评论。
对评论的回复：即用户对已有评论进行回复。

这两种回复在默认模板中的结构是不同的,因此修改样式时需要分别处理。

默认结构分析

在修改之前,我们先要了解 DedeCMS 默认生成的 HTML 结构是什么样子，这通常在 templets/default 目录下的相关文件中定义。

主评论的回复

主评论的回复通常包含在一个 <dd class="reply"> 标签内，它的默认结构大致如下：

<dd class="reply">
    <div class="reply-box">
        <div class="reply-header">
            <span class="user">回复者: <a href="#">访客123</a></span>
            <span class="time">2025-10-27 15:30</span>
        </div>
        <div class="reply-content">
            这是对主评论的回复内容。
        </div>
    </div>
</dd>

对评论的回复

对评论的回复（嵌套回复）通常结构更复杂一些，因为它需要指明是回复谁，它的默认结构大致如下：

（图片来源网络，侵删）

<dd class="reply">
    <div class="reply-box">
        <div class="reply-header">
            <span class="user">回复者: <a href="#">访客456</a> 回复 <a href="#">@访客123</a></span>
            <span class="time">2025-10-27 15:31</span>
        </div>
        <div class="reply-content">
            这是嵌套的回复内容。
        </div>
    </div>
</dd>

核心要点：

主评论和回复都包裹在 <dd class="reply"> 中。
的核心容器是 .reply-box。
用户信息和时间在 .reply-header 中。
实际文字内容在 .reply-content 中。

修改样式（CSS）

了解了结构后,我们就可以通过 CSS 来美化它了，我们可以在 templets/default/style/dedecms.css 文件中添加或修改样式，或者在模板文件中使用 <style> 标签内嵌样式。

下面提供一些常用的美化方案。

简洁清爽风格

这种风格通过调整间距、字体和背景色，让回复部分看起来更清晰。

（图片来源网络，侵删）

/* 1. 设置整个回复区域的样式 */
dd.reply {
    margin-left: 60px; /* 向右缩进，与主评论区分开 */
    margin-top: 15px;
    border-left: 3px solid #e0e0e0; /* 添加一条左边框，视觉上区分 */
    padding-left: 15px;
}
/* 2. 回复内容框的样式 */
.reply-box {
    background-color: #f9f9f9;
    border-radius: 6px;
    padding: 12px 15px;
}
/* 3. 回复头部的样式 */
.reply-header {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
    line-height: 1.5;
}
/* 4. 用户名和链接的样式 */
.reply-header .user a {
    color: #007bff; /* 蓝色链接 */
    text-decoration: none;
}
.reply-header .user a:hover {
    text-decoration: underline;
}
/* 5. 时间戳的样式 */
.reply-header .time {
    margin-left: 15px;
}
/* 6. 回复内容的样式 */
.reply-content {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

卡片式风格

这种风格让每个回复都像一个独立的卡片,非常现代和美观。

/* 1. 回复区域整体布局 */
dd.reply {
    margin-left: 60px;
    margin-top: 15px;
}
/* 2. 卡片容器 */
.reply-box {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 添加轻微阴影 */
    transition: box-shadow 0.3s ease; /* 鼠标悬停时的阴影变化 */
}
.reply-box:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* 3. 卡片头部 */
.reply-header {
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: #666;
}
/* 4. 卡片内容 */
.reply-content {
    padding: 12px 15px;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}
/* 5. 用户和时间信息样式 */
.reply-header .user {
    font-weight: 500;
}
.reply-header .user a {
    color: #0056b3;
    font-weight: 500;
}
.reply-header .time {
    float: right; /* 将时间靠右显示 */
    color: #999;
}

修改模板（PHP）

默认的 HTML 结构可能不满足我们的设计需求，或者想增加一些元素（如楼层号、表情等），这时就需要修改 PHP 模板文件。

重要提示：修改模板文件前，务必备份原文件！

评论的回复模板通常位于： /include/common.inc.php 或 /templets/default/feedback.htm (根据版本不同可能有所差异，但核心逻辑在 common.inc.php 中)。

我们主要关注处理回复输出的代码段,通常是一个循环，里面会判断 arctype（评论类型）并输出相应的 HTML。

示例：在回复中添加楼层号

假设你想在每个回复前面加上一个“楼主”、“2楼”、“3楼”的标识。

找到并修改 PHP 代码：在 common.inc.php 中找到生成回复列表的 while 循环，在里面添加一个楼层计数器 $floor。

// ... 在循环开始前初始化
$replyCount = 0; // 用于计算回复的楼层号
// ... 在循环内部
while($arr = $dsql->GetArray())
{
    // ... 其他代码 ...
    // 增加回复计数器
    if($arr['pid'] > 0) { // 确保是回复
        $replyCount++;
        $floor = $replyCount;
    }
    // ... 输出HTML的地方 ...
    // 将 $floor 变量传递给模板
    // 代码可能类似下面这样：
    $msg = "<dd class=\"reply\">\r\n";
    // ... 这里是默认的HTML ...
    $msg .= "    <div class=\"reply-header\">\r\n";
    $msg .= "        <span class=\"user\">回复者: <a href='#'>".$arr['user']."</a> ";
    // 如果是回复，添加楼层号
    if($arr['pid'] > 0) {
        $msg .= "<span class='floor'>(".$floor."楼)</span> ";
    }
    // ... 继续其他代码 ...
}

添加 CSS 样式：在你的 CSS 文件中，为楼层号添加样式。

.floor {
    background-color: #6c757d;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    margin-left: 8px;
}

示例：美化嵌套回复的符号

默认的 @用户名 可能不够醒目，我们可以把它变得更漂亮。

修改 PHP 模板：找到生成链接的代码部分，并给它加上一个 class。

// 在 common.inc.php 中找到类似这样的代码
$msg .= "回复 <a href=\"#\">@".$arr['user']."</a>";
// 修改为
$msg .= " 回复 <a href=\"#\" class=\"at-user\">@".$arr['user']."</a>";

添加 CSS 样式：在 CSS 文件中定义 .at-user 的样式。

/* 美化 @ 用户名链接 */
.at-user {
    color: #00aaff; /* 亮蓝色 */
    font-weight: bold;
    text-decoration: none;
    background-color: rgba(0, 170, 255, 0.1);
    padding: 0 3px;
    border-radius: 3px;
}
.at-user:hover {
    color: #0056b3;
    background-color: rgba(0, 170, 255, 0.2);
    text-decoration: underline;
}

开启和配置嵌套回复功能

DedeCMS 默认可能不支持多级嵌套回复（即回复的回复），如果你的版本支持或你通过插件开启了此功能，其样式结构会更加复杂（可能包含多层 <dd>），但修改原理是相通的：先分析 HTML 结构，再用 CSS 进行针对性样式控制。

对于二级嵌套回复,你可以这样设置：

/* 二级嵌套回复的左边框颜色更深，以示区别 */
dd.reply dd.reply {
    border-left-color: #ccc;
    margin-left: 80px; /* 缩进更多 */
}
/* 三级嵌套回复 */
dd.reply dd.reply dd.reply {
    border-left-color: #999;
    margin-left: 100px;
}

分析结构：查看 feedback.htm 或 common.inc.php，了解 <dd class="reply"> 的默认 HTML 结构。
CSS 美化：这是最常用、最安全的方法，通过 CSS 类（如 .reply-box, .reply-header）来控制布局、颜色、字体、间距等。
模板修改：当需要改变 HTML 结构或增加动态内容（如楼层号）时，才需要修改 PHP 文件，操作前务必备份。
测试：每次修改后，清除浏览器缓存，刷新页面查看效果。

通过以上步骤,你完全可以打造出符合网站风格的、美观的评论回复样式。

dede评论回复样式如何自定义修改？

默认结构分析

主评论的回复

对评论的回复

修改样式（CSS）

简洁清爽风格

卡片式风格

修改模板（PHP）

示例：在回复中添加楼层号

示例：美化嵌套回复的符号

开启和配置嵌套回复功能

相关文章

目录[+]

默认结构分析

主评论的回复

对评论的回复

修改样式（CSS）

简洁清爽风格

卡片式风格

修改模板（PHP）

示例：在回复中添加楼层号

示例：美化嵌套回复的 符号

开启和配置嵌套回复功能

相关文章

目录[+]

示例：美化嵌套回复的符号