搜索
DEDE建站

dede评论模板修改，如何直接调整样式？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 6 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 34 分钟
位置： 首页 › DEDE建站 › 正文

DedeCMS 的评论系统分为两种主要形式：

dede评论模板修改
（图片来源网络，侵删）
  1. 文章评论：针对单篇文章的评论,最常见。
  2. 自定义模型评论：针对自定义表单（如留言簿、问答等）的评论。

这两种的修改方法基本一致，核心都是修改两个文件：一个控制评论显示的模板，一个控制评论提交表单的模板。

核心文件位置

在修改之前,你需要知道这两个关键文件在哪里：

  1. 评论显示模板：

    • 文章评论：/templets/default/article_comment.htm
    • 自定义模型评论：/templets/default/plus/list_feedback.htm

  2. 评论提交表单模板：

    dede评论模板修改
    （图片来源网络，侵删）
    • 文章评论：/templets/default/feedback_templet.htm
    • 自定义模型评论：/templets/default/feedback_templet.htm (与文章评论共用)

注意：default 是默认的模板文件夹，如果你的网站使用的是其他自定义模板（如 pc、mobile 等），请将路径中的 default 替换为你自己的模板文件夹名称。

修改评论显示模板 (article_comment.htm 或 list_feedback.htm)

这个文件决定了评论列表以什么样的样式展示出来。

找到并打开文件

使用 FTP 或主机管理面板，找到并下载 article_comment.htm 文件。

关键代码块解析

这个文件主要由几部分组成：评论列表循环、分页 和 发表评论的表单引用。

dede评论模板修改
（图片来源网络，侵删）

a. 评论列表循环

这是最核心的部分，它会遍历所有评论并显示出来，通常由一个 {dede:loop} 或 {dede:arclist} 标签完成。

<!-- 评论列表开始 -->
{dede:loop table='dede_feedback' sort='dtime' row='10'}
    <li class="comment-item">
        <!-- 用户头像 -->
        <div class="user-avatar">
            <img src="[field:face function="GetFace(@me)"/]" alt="[field:username function="htmlspecialchars(@me)"/]" />
        </div>
        <!-- 评论内容 -->
        <div class="comment-content">
            <div class="comment-header">
                <span class="username">[field:username function="htmlspecialchars(@me)"/]</span>
                <span class="comment-time">[field:pubdate function="MyDate('Y-m-d H:i',@me)"/]</span>
            </div>
            <p class="comment-text">[field:msg function="htmlspecialchars(@me)"/]</p>
        </div>
    </li>
{/dede:loop}
<!-- 评论列表结束 -->

常用字段说明：

  • [field:id]：评论ID。
  • [field:username]：评论者用户名，使用 htmlspecialchars 函数可以防止XSS攻击,推荐加上。
  • [field:uname]：评论者昵称（如果用户登录了）。
  • [field:face]：评论者头像的文件名，通常需要配合函数使用，如 GetFace(@me) 来获取完整头像路径。
  • [field:msg]，同样推荐使用 htmlspecialchars 函数。
  • [field:ip]：评论者IP地址。
  • [field:ischeck]：评论是否审核（0=未审核，1=已审核）。
  • [field:dtime]：评论时间戳，通常用 MyDate 函数格式化，如 MyDate('Y-m-d H:i',@me)。

b. 分页代码

如果评论很多,就需要分页显示。

<!-- 分页开始 -->
<div class="comment-page">
    {dede:pagelist listitem="info,index,end,pre,next,pageno" listsize="5"/}
</div>
<!-- 分页结束 -->

c. 引用发表评论的表单

在评论列表的下方，通常会包含一个发表评论的表单，这个表单通常被放在一个单独的文件 feedback_templet.htm 中，然后通过 {dede:include filename="feedback_templet.htm"/} 来引用。

修改评论提交表单模板 (feedback_templet.htm)

这个文件定义了用户发表评论时看到的输入框、按钮等表单元素。

找到并打开文件

下载 /templets/default/feedback_templet.htm 文件。

关键代码块解析

这个文件的核心是一个 <form> 表单。

<form name="feedback" action="{dede:global.cfg_cmspath/}/plus/feedback.php" method="post">
    <input type="hidden" name="aid" value="{dede:field.id/}" />
    <input type="hidden" name="action" value="send" />
    <input type="hidden" name="do" value="send" />
    <!-- 如果开启了验证码 -->
    {dede:php}
        if($cfg_feedback_audit == 'Y') {
    {/dede:php}
        <div class="verify-code">
            <label for="validate">验证码：</label>
            <input type="text" name="validate" id="validate" style="width:50px;text-align:center;" />
            <img src="{dede:global.cfg_cmspath/}/include/vdimgck.php" width="60" height="24" style="cursor:pointer" onclick="this.src='{dede:global.cfg_cmspath/}/include/vdimgck.php?t='+Math.random()" title="看不清？点击更换" />
        </div>
    {dede:php}
        }
    {/dede:php}
    <!-- 评论内容输入框 -->
    <div class="comment-input">
        <textarea name="msg" id="msg" rows="8" placeholder="请输入您的评论..."></textarea>
    </div>
    <!-- 提交按钮 -->
    <div class="comment-submit">
        <button type="submit" name="submit">发表评论</button>
    </div>
</form>

重要属性说明：

  • action="{dede:global.cfg_cmspath/}/plus/feedback.php"：这是处理评论提交的PHP脚本，不要轻易修改。
  • <input type="hidden" name="aid" value="{dede:field.id/}" />：这个隐藏字段至关重要，它告诉系统这篇评论是针对哪篇文章（aid 是文章ID）的，对于自定义模型，aid 可能是其他字段,需要根据具体情况调整。
  • name="msg"的输入框名称,后台处理脚本依赖这个名称来获取数据。
  • {dede:php}...{/dede:php}：这是DedeCMS的PHP代码块，用来判断是否需要显示验证码。$cfg_feedback_audit == 'Y' 表示开启了评论审核,通常审核开启时也会显示验证码。

实战示例：修改评论样式

假设你想让评论显示得更美观一些，比如每条评论有边框、头像和内容分左右布局。

修改 article_comment.htm

<!-- 在 CSS 中添加样式 -->
<style>
    .comment-list { list-style: none; padding: 0; }
    .comment-item { 
        border: 1px solid #eee; 
        border-radius: 5px; 
        padding: 15px; 
        margin-bottom: 15px; 
        display: flex; 
        align-items: flex-start;
    }
    .user-avatar { 
        margin-right: 15px; 
        flex-shrink: 0; /* 防止头像被压缩 */
    }
    .user-avatar img { 
        width: 50px; 
        height: 50px; 
        border-radius: 50%; 
        object-fit: cover;
    }
    .comment-content { flex-grow: 1; }
    .comment-header { 
        display: flex; 
        justify-content: space-between; 
        margin-bottom: 8px; 
        font-size: 13px; 
        color: #666;
    }
    .comment-text { line-height: 1.6; }
</style>
<!-- 评论列表开始 -->
<ul class="comment-list">
{dede:loop table='dede_feedback' sort='dtime' row='10'}
    <li class="comment-item">
        <!-- 用户头像 -->
        <div class="user-avatar">
            <!-- 如果没有头像，使用一个默认头像 -->
            <img src="[field:face function="(@me ? GetFace(@me) : '/templets/default/images/default_avatar.jpg')"]" alt="[field:username function="htmlspecialchars(@me)"/]" />
        </div>
        <!-- 评论内容 -->
        <div class="comment-content">
            <div class="comment-header">
                <span class="username">[field:username function="htmlspecialchars(@me)"/]</span>
                <span class="comment-time">[field:pubdate function="MyDate('Y-m-d H:i',@me)"/]</span>
            </div>
            <p class="comment-text">[field:msg function="htmlspecialchars(@me)"/]</p>
        </div>
    </li>
{/dede:loop}
</ul>
<!-- 评论列表结束 -->

修改 feedback_templet.htm (可选)

你可以给评论表单也加上一些样式,让它看起来更协调。

<style>
    .comment-form-box { margin-top: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
    .comment-form-box textarea { 
        width: 100%; 
        padding: 10px; 
        border: 1px solid #ccc; 
        border-radius: 3px;
        resize: vertical; /* 允许垂直拉伸 */
    }
    .comment-form-box button {
        margin-top: 10px;
        padding: 8px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }
    .comment-form-box button:hover {
        background-color: #0056b3;
    }
</style>
<form name="feedback" action="{dede:global.cfg_cmspath/}/plus/feedback.php" method="post">
    <input type="hidden" name="aid" value="{dede:field.id/}" />
    <input type="hidden" name="action" value="send" />
    <input type="hidden" name="do" value="send" />
    {dede:php}
        if($cfg_feedback_audit == 'Y') {
    {/dede:php}
        <div class="verify-code">
            <label for="validate">验证码：</label>
            <input type="text" name="validate" id="validate" style="width:80px;" />
            <img src="{dede:global.cfg_cmspath/}/include/vdimgck.php" width="100" height="30" onclick="this.src='{dede:global.cfg_cmspath/}/include/vdimgck.php?t='+Math.random()" />
        </div>
    {dede:php}
        }
    {/dede:php}
    <div class="comment-form-box">
        <textarea name="msg" id="msg" rows="6" placeholder="请发表您的评论..."></textarea>
        <button type="submit">发表评论</button>
    </div>
</form>

注意事项

  1. 备份！备份！备份！ 在修改任何模板文件之前，务必备份原始文件，一旦修改出错,可以快速恢复。
  2. 使用FTP工具：推荐使用 FileZilla 等FTP客户端来上传下载文件,比网页后台更稳定。
  3. 清除缓存：修改完模板后，如果前台没有立即生效，请登录 DedeCMS 后台，点击“系统” -> “一键更新站点” -> “更新HTML”,或者直接清除浏览器缓存。
  4. 自定义模型：如果你修改的是自定义模型的评论，请确保 dede_feedback 表中 typeid 字段与你自定义模型的ID相关联，有时可能需要调整 loop 标签中的查询条件。
  5. 安全：始终对用户输入的内容（如 username 和 msg）使用 htmlspecialchars 函数进行处理,防止跨站脚本攻击。

通过以上步骤，你就可以自由地定制 DedeCMS 评论系统的显示样式和表单样式了。

-- 展开阅读全文 --
头像
C语言简易计算器如何实现核心功能？
« 上一篇 04-27
织梦下载站模板源码如何获取？
下一篇 » 04-27

相关文章

dede评论模板如何制作？
取消
微信二维码
支付宝二维码

目录[+]