搜索
DEDE建站

dede评论模板如何制作？

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

在 DedeCMS 中，评论的显示和样式主要由两个部分控制：

dede制作评论模板
（图片来源网络，侵删）
  1. 评论模板文件：这是决定评论列表、表单等HTML结构的文件。
  2. CSS 样式文件：这是控制评论布局、颜色、字体等视觉样式的文件。

下面我将分步为您讲解如何操作。

第一步：找到评论模板文件

DedeCMS 的评论模板通常存放在 /templets/ 目录下，默认情况下，它可能是一个独立的文件，也可能被整合到内容页模板中。

最常见的情况：评论模板是独立文件

  1. 登录你的 DedeCMS 后台。
  2. 进入【模板】 -> 【模板管理】。
  3. 在左侧选择你当前使用的模板风格。
  4. 在右侧的文件列表中,查找名为 comment.htm 的文件，这就是评论的默认模板文件，如果你找不到，可能是它被重命名了或者集成在其他模板里。

另一种情况：评论代码集成在内容页模板中

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

有些模板为了灵活性,会将评论代码直接写在内容页模板（如 article_article.htm）里，你可以用文本编辑器打开这个文件，查找类似 {dede:include filename="comment.htm" /} 或者包含 feedback 标签的代码块。

本教程以独立的 comment.htm 为例进行讲解。

第二步：理解 comment.htm 文件的结构

打开 comment.htm 文件，你会看到它主要由几个 DedeCMS 的内置标签组成，理解这些标签是修改模板的关键。

核心标签解析：

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

  1. {dede:feedback}

    • 这是一个循环标签，用于遍历所有的评论。
    • 它会循环输出 {dede:feedback} 和 {/dede:feedback} 之间的内容，每循环一次就输出一条评论。
    • 常用属性：
      • row='10'：显示评论的数量。
      • table='#@__feedback'：指定评论数据表（通常不用改）。
      • typeid='栏目ID'：只显示指定栏目的评论（通常不用改）。

  2. {dede:feedbackurl}

    • 用于生成评论表单提交的地址,这个地址是固定的，通常指向 /plus/feedback.php。这个标签必须保留，否则评论无法提交。

  3. {dede:feedbackform}

    • 这是评论表单的标签，它包含了用户输入姓名、邮箱、验证码和评论内容的表单元素。这个标签也必须保留。

  4. {dede:php} ... {/dede:php}

    用于执行 PHP 代码，有时为了实现一些复杂功能，会在这里写一些 PHP 逻辑。

第三步：修改评论模板 (comment.htm)

我们可以开始动手修改 comment.htm 了，目标是创建一个美观、易用的评论界面。

示例：一个现代化的评论模板

下面是一个完整的 comment.htm 示例，并附有详细注释，你可以将它复制到你的 comment.htm 文件中，然后根据你的需求进行修改。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">评论 - {dede:global.cfg_webname/}</title>
    <!-- 引入你的CSS文件，这个文件用于控制评论样式 -->
    <link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/css/style.css">
</head>
<body>
    <div class="dede_comments">
        <!-- 评论区标题 -->
        <h3>评论列表 (<span class="comment_count">{dede:field name='postnum'/}</span>)</h3>
        <!-- 评论列表开始 -->
        <ul class="comment_list">
            {dede:feedback row='10' titlelen='36' infolen='100'}
            <li class="comment_item">
                <!-- 评论者头像 -->
                <div class="avatar">
                    <!-- 如果用户有头像则显示，否则显示默认头像 -->
                    <img src="[field:face function="(@me=='' ? '/templets/default/images/defaultavatar.jpg' : @me)"/]" alt="[field:username function='htmlspecialchars(@me)'/]">
                </div>
                <!-- 评论内容 -->
                <div class="comment_content">
                    <!-- 评论者信息和时间 -->
                    <div class="comment_info">
                        <span class="username">[field:username function='htmlspecialchars(@me)'/]</span>
                        <span class="time">[field:time function='strftime("%Y-%m-%d %H:%M:%S", @me)'/]</span>
                    </div>
                    <!-- 评论正文 -->
                    <p class="text">[field:msg function='htmlspecialchars(@me)'/]</p>
                    <!-- 回复按钮 -->
                    <div class="comment_reply">
                        <a href="javascript:;" onclick="Reply([field:id/], '[field:username function='htmlspecialchars(@me)'/]')">回复</a>
                    </div>
                </div>
            </li>
            {/dede:feedback}
        </ul>
        <!-- 评论列表结束 -->
        <!-- 分页 -->
        <div class="comment_page">
            {dede:pagelist listsize='3'/}
        </div>
        <!-- 评论表单开始 -->
        <div class="comment_form">
            <h3>发表评论</h3>
            <form name="feedback" action="{dede:feedbackurl/}" method="post">
                <!-- 隐藏字段，必须 -->
                <input type="hidden" name="aid" value="{dede:field.aid/}" />
                <input type="hidden" name="do" value="send" />
                <!-- 用户名 -->
                <div class="form-group">
                    <label for="username">昵称：</label>
                    <input type="text" name="username" id="username" class="input" required />
                </div>
                <!-- 邮箱 -->
                <div class="form-group">
                    <label for="email">邮箱：</label>
                    <input type="email" name="email" id="email" class="input" required />
                </div>
                <!-- 验证码 -->
                <div class="form-group">
                    <label for="validate">验证码：</label>
                    <div class="code-group">
                        <input type="text" name="validate" id="validate" class="input" required />
                        <img src="{dede:admincode/}" id="code" style="cursor:pointer;" onclick="this.src='{dede:admincode/}&t='+Math.random()" title="点击刷新验证码" />
                    </div>
                </div>
                <!-- 评论内容 -->
                <div class="form-group">
                    <label for="msg">评论内容：</label>
                    <textarea name="msg" id="msg" rows="5" class="textarea" required ></textarea>
                </div>
                <!-- 提交按钮 -->
                <div class="form-group">
                    <button type="submit" class="submit-btn">发表评论</button>
                </div>
            </form>
        </div>
        <!-- 评论表单结束 -->
    </div>
</body>
</html>

代码解释：

  • {dede:feedback row='10' titlelen='36' infolen='100'}:
    • row='10'：显示最新的10条评论。
    • titlelen='36'：这个属性在评论列表中通常无效，主要用于文档标题截断，可以忽略或删除。
    • infolen='100'：截断评论内容显示前100个字符，防止过长的评论撑破页面，你可以根据需要调整。
  • [field:face ...]: 显示用户头像，这里使用了PHP函数，如果用户没有设置头像，就使用系统默认的 defaultavatar.jpg，你需要确保这个默认头像路径是正确的。
  • [field:username function='htmlspecialchars(@me)'/]: 显示用户名，并用 htmlspecialchars 函数处理，防止XSS攻击。
  • [field:time function='strftime("%Y-%m-%d %H:%M:%S", @me)'/]: 显示评论时间，并用 strftime 函数格式化成年-月-日 时:分:秒的格式。
  • [field:msg function='htmlspecialchars(@me)'/]: 显示评论正文，同样进行XSS过滤。
  • {dede:feedbackurl/}: 生成评论提交地址。
  • {dede:admincode/}: 生成验证码图片。

第四步：创建和修改 CSS 样式

光有HTML结构是不够的,我们需要用CSS来美化它。

  1. 创建CSS文件：

    • 在你的模板目录下（/templets/你的模板名/），创建一个名为 css 的文件夹。
    • 在 css 文件夹里，创建一个名为 style.css 的文件。

  2. 编写CSS代码：

    • 将下面这段CSS代码复制到 style.css 文件中。
    • 你可以根据你的网站主题颜色和布局,自由修改颜色、边距、字体等属性。
/* 评论区容器 */
.dede_comments {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 20px auto;
    padding: 0 20px;
}
/* 评论区标题 */
.dede_comments h3 {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
/* 评论数量 */
.comment_count {
    color: #007bff;
    font-weight: bold;
}
/* 评论列表 */
.comment_list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}
/* 单条评论 */
.comment_item {
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}
/* 用户头像 */
.avatar {
    width: 50px;
    height: 50px;
    margin-right: 15px;
    flex-shrink: 0;
}
.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
区 */
.comment_content {
    flex-grow: 1;
}
/* 评论者信息和时间 */
.comment_info {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
}
.username {
    font-weight: bold;
    color: #007bff;
    margin-right: 10px;
}
.time {
    color: #999;
}
*/
.comment_content .text {
    margin: 0 0 10px 0;
    word-wrap: break-word;
}
/* 回复按钮 */
.comment_reply a {
    color: #007bff;
    text-decoration: none;
    font-size: 13px;
}
.comment_reply a:hover {
    text-decoration: underline;
}
/* 分页 */
.comment_page {
    text-align: center;
    margin: 20px 0;
}
/* 评论表单 */
.comment_form {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}
.comment_form h3 {
    margin-top: 0;
    margin-bottom: 15px;
}
/* 表单组 */
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
/* 输入框和文本域 */
.input, .textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* 确保padding不会增加宽度 */
}
.textarea {
    resize: vertical; /* 允许垂直调整大小 */
}
/* 验证码 */
.code-group {
    display: flex;
    align-items: center;
}
.code-group .input {
    width: 120px;
    margin-right: 10px;
}
.code-group img {
    height: 32px;
    cursor: pointer;
}
/* 提交按钮 */
.submit-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
.submit-btn:hover {
    background-color: #0056b3;
}

第五步：更新和测试

  1. 保存文件：保存你修改好的 comment.htm 和 style.css 文件。
  2. 更新缓存：回到 DedeCMS 后台，进入【系统】 -> 【一键更新网站】，选择“更新所有HTML”或“更新栏目HTML”并执行，这一步是为了让 DedeCMS 重新生成包含新模板的页面。
  3. 清空浏览器缓存：按 Ctrl + F5 强制刷新浏览器页面。
  4. 测试：打开任意一篇文章，滚动到评论区域，查看效果是否符合你的预期，如果样式错乱，请检查 style.css 文件路径是否正确（{dede:global.cfg_templets_skin/}/css/style.css 会自动替换为你的模板路径）。

总结与高级技巧

  • 回复功能：上面的模板包含了“回复”按钮的HTML，但默认的 DedeCMS 评论回复功能是嵌套显示的，如果你想实现类似 WordPress 的回复样式，需要修改 comment.htm 的循环结构，并可能需要修改 plus/feedback.php 的逻辑，这属于高级开发范畴。
  • Ajax 无刷新评论：默认提交评论会刷新整个页面，为了提升用户体验，你可以引入 jQuery，通过 Ajax 方式提交评论表单，成功后再动态地将新评论添加到列表中，这需要一定的 JavaScript 和 PHP 知识。
  • 自定义字段：如果你在后台添加了自定义的评论字段（如网站地址），你需要在 comment.htm 中使用 [field:你的字段名/] 来调用它。

通过以上步骤,你就可以完全掌控 DedeCMS 的评论模板，使其与你的网站风格完美融合。

-- 展开阅读全文 --
头像
dede采集不到内容怎么办？
« 上一篇 前天
dede修改网站密码步骤是什么？
下一篇 » 前天

相关文章

dede评论模板修改，如何直接调整样式？
取消
微信二维码
支付宝二维码

目录[+]