搜索
织梦建站

织梦在线留言本模板如何快速搭建？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 6 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 38 分钟
位置： 首页 › 织梦建站 › 正文
  • 模板名称： 简约风在线留言本
  • 适用版本： 织梦DedeCMS 5.7 及以上版本
  • 功能特点：
    1. 响应式设计： 适配电脑、平板和手机等不同设备。
    2. 会员功能： 区分游客和会员登录留言，会员信息自动填充。
    3. 验证码： 游客留言需填写验证码，防止垃圾信息。
    4. 管理功能： 后台可审核、回复、删除留言。
    5. 分页功能： 留言内容自动分页显示。
    6. 表情支持： 留言时可插入常用表情。

文件结构

在织梦的 /templets/ 目录下新建一个文件夹，guestbook，然后将以下文件放入其中：

织梦在线留言本模板
（图片来源网络，侵删）
/templets/guestbook/
├── index.html          (留言板列表页模板)
├── post.html           (留言提交页模板，可选，通常与列表页合一)
└── style.css           (留言板的样式文件)

模板代码

样式文件 (/templets/guestbook/style.css)

/* 留言板容器 */
.gb-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* 留言表单 */
.gb-form {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
}
.gb-form .form-group {
    margin-bottom: 15px;
}
.gb-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}
.gb-form input[type="text"],
.gb-form input[type="email"],
.gb-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box; /* 确保padding不会影响宽度 */
}
.gb-form textarea {
    min-height: 100px;
    resize: vertical;
}
.gb-form .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}
.gb-form .btn:hover {
    background-color: #0056b3;
}
/* 留言列表 */
.gb-list {
    list-style: none;
    padding: 0;
}
.gb-item {
    padding: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    background-color: #fff;
    border-radius: 5px;
}
.gb-item:last-child {
    border-bottom: none;
}
.gb-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.gb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #666;
}
.gb-info {
    flex-grow: 1;
}
.gb-author {
    font-weight: bold;
    color: #333;
}
.gb-date {
    font-size: 12px;
    color: #999;
}
.gb-content {
    line-height: 1.6;
    color: #555;
    word-wrap: break-word;
}
.gb-reply {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ddd;
    background-color: #f0f8ff;
    border-radius: 4px;
}
.gb-reply-title {
    font-weight: bold;
    color: #007bff;
    margin-bottom: 5px;
}
/* 分页 */
.gb-pages {
    text-align: center;
    margin-top: 30px;
}
.gb-pages a, .gb-pages span {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 2px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
}
.gb-pages a:hover {
    background-color: #f0f0f0;
}
.gb-pages .thispage {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

列表页模板 (/templets/guestbook/index.html)

这个模板将“留言表单”和“留言列表”放在同一个页面，这是最常见的设计。

<!DOCTYPE html>
<html>
<head>
    <meta charset="="UTF-8">{dede:global.cfg_webname/} - 在线留言</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{dede:global.cfg_cmsurl/}/templets/guestbook/style.css">
</head>
<body>
    <div class="gb-container">
        <h1 style="text-align: center; color: #333; margin-bottom: 30px;">在线留言</h1>
        <!-- 留言表单 -->
        <form name="guestbook" method="post" action="{dede:global.cfg_cmspath/}/plus/guestbook.php" class="gb-form">
            <input type="hidden" name="dopost" value="send" />
            <input type="hidden" name="aid" value="{dede:field.id/}" /> <!-- 如果关联到文章，则传递文章ID -->
            {dede:php}
                if ($cfg_ml->IsLogin()) {
                    // 如果会员已登录
                    echo '<p>欢迎您，<strong>'.$cfg_ml->M_UserName.'</strong>！</p>';
                    echo '<div class="form-group"><label>昵称</label><input type="text" name="uname" value="'.$cfg_ml->M_UserName.'" readonly /></div>';
                    echo '<div class="form-group"><label>邮箱</label><input type="email" name="email" value="'.$cfg_ml->M_Email.'" readonly /></div>';
                } else {
                    // 如果游客未登录
                    echo '<div class="form-group"><label>昵称 <span style="color:red;">*</span></label><input type="text" name="uname" required /></div>';
                    echo '<div class="form-group"><label>邮箱</label><input type="email" name="email" /></div>';
                }
            {/dede:php}
            <div class="form-group">
                <label>留言内容 <span style="color:red;">*</span></label>
                <textarea name="msg" required></textarea>
            </div>
            {dede:php}
                if (!$cfg_ml->IsLogin()) {
                    // 游客显示验证码
                    echo '<div class="form-group"><label>验证码 <span style="color:red;">*</span></label>';
                    echo '<div style="display: flex; align-items: center;">';
                    echo '<input type="text" name="validate" required style="width: 150px;" />';
                    echo '<img src="' . $cfg_cmspath . '/include/vdimgck.php" style="margin-left: 10px;" onclick="this.src=this.src+'+time()+'" title="点击刷新验证码" />';
                    echo '</div></div>';
                }
            {/dede:php}
            <button type="submit" class="btn">提交留言</button>
        </form>
        <!-- 留言列表 -->
        <div class="gb-list-container">
            <ul class="gb-list">
                {dede:loop table='dede_guestbook' sort='dtime' row='10' titlelen='30'}
                <li class="gb-item">
                    <div class="gb-header">
                        <div class="gb-avatar">{dede:field.name function='substr(@me, 0, 1)'/}</div>
                        <div class="gb-info">
                            <div class="gb-author">{dede:field.name/}</div>
                            <div class="gb-date">{dede:field.ip/} | {dede:field.dtime function='MyDate("Y-m-d H:i", @me)'/}</div>
                        </div>
                    </div>
                    <div class="gb-content">
                        {dede:field.msg function='htmlspecialchars_decode(@me)'/}
                    </div>
                    <!-- 后台回复显示 -->
                    {dede:if reply!=''}
                    <div class="gb-reply">
                        <div class="gb-reply-title">管理员回复：</div>
                        <div>{dede:field.reply/}</div>
                    </div>
                    {/dede:if}
                </li>
                {/dede:loop}
            </ul>
            <!-- 分页 -->
            {dede:pagelist listsize='4'/}
        </div>
    </div>
</body>
</html>

后台设置与修改

仅仅有模板文件是不够的,还需要在织梦后台进行一些关键设置。

创建留言单页

  1. 登录织梦后台。
  2. 在“核心” -> “频道模型” -> “单页文档管理”中，点击“增加顶级页面”。
  3. 页面名称： 在线留言
  4. 保持为空。
  5. 生成HTML： 勾选“是”。
  6. 文件命名规则： guestbook.html (这个文件名可以自定义，但要与后续步骤对应)。
  7. 点击“确定”。

修改留言本处理文件 (/plus/guestbook.php)

为了实现模板中 {dede:loop} 标签能正确调用留言数据，需要修改默认的留言本处理逻辑。

  1. 打开文件 /plus/guestbook.php。

    织梦在线留言本模板
    （图片来源网络，侵删）

  2. 找到 if($dopost=="send") 部分，在 ShowMsg("留言成功,请等待管理员审核!", $gurl, 0, 5000); 这行代码之前，添加以下代码：

    // 在留言成功后，将留言状态改为已审核，以便在前台直接显示
$query = "UPDATE dede_guestbook SET ischeck=1 WHERE id='$id'";
$dsql->ExecuteNoneQuery($query);

    说明： 默认情况下，新提交的留言 ischeck 字段为0，表示“未审核”，不会在前台显示，我们将其改为1，表示“已审核”，这样就能直接显示出来。注意： 这会绕过后台审核，如果需要审核，请勿添加此代码。

(可选) 修改留言表单的提交地址

在模板 index.html 中，表单的 action 属性指向的是 guestbook.php，这个文件默认是用于处理AJAX请求的，可能会导致提交失败或刷新整个页面。

为了更好的用户体验,建议修改表单提交地址为：

织梦在线留言本模板
（图片来源网络，侵删）
<!-- 将原来的 -->
<form ... action="{dede:global.cfg_cmspath/}/plus/guestbook.php" ...>
<!-- 修改为 -->
<form ... action="{dede:global.cfg_cmspath/}/plus/guestbook.php?dopost=send" ...>

或者,如果你将留言板做成了单页，并且想提交后停留在当前页面，可以这样写：

<form ... action="{dede:global.cfg_cmspath/}/plus/guestbook.php?dopost=send&gurl={dede:global.cfg_cmsurl/}/guestbook.html" ...>

gurl 参数指定了提交成功后跳转的URL。

安装与使用步骤

  1. 上传模板文件： 将 guestbook 文件夹上传到您的织梦网站 /templets/ 目录下。
  2. 创建单页： 按照上述“后台设置”的步骤，创建一个名为“在线留言”的单页文档，并命名为 guestbook.html。
  3. 修改处理文件： 按照需要，修改 /plus/guestbook.php 文件。
  4. 生成页面： 在后台“生成” -> “一键更新网站”中，选择“更新HTML”，并勾选“更新所有页面”或单独更新你创建的 guestbook.html。
  5. 访问测试： 通过网站前台访问你设置的留言板页面（yourdomain.com/guestbook.html），测试留言功能是否正常。

注意事项与扩展

  • 安全性： 开放留言板容易被垃圾信息（SPAM）攻击，建议始终开启验证码功能，对于更高级的防垃圾信息，可以考虑集成 reCAPTCHA 或其他第三方服务。
  • 审核功能： 如果你希望所有留言都需要后台审核，请勿修改 guestbook.php 文件中的 ischeck 值，这样，新留言将不会在前台显示，直到你在后台“留言管理”中点击“审核通过”。
  • 样式调整： style.css 文件中的颜色、间距、字体等都可以根据您网站的整体风格进行自由调整。
  • 功能扩展：
    • 邮件通知： 可以修改 guestbook.php，在收到新留言时，使用 mail() 函数发送邮件通知网站管理员。
    • Ajax提交： 可以使用 jQuery 等前端库，将表单改为Ajax提交，实现无刷新留言，用户体验更佳。

这个完整的方案应该能帮助你快速搭建一个功能完善的在线留言本,祝你使用愉快！

-- 展开阅读全文 --
头像
二级目录SEO如何优化才能提升权重？
« 上一篇 04-27
地址运算符在C语言中具体作用是什么？
下一篇 » 04-27

相关文章

取消
微信二维码
支付宝二维码

目录[+]