- 使用织梦自带的手机标签:这是最简单、最推荐的方法,专为手机版模板设计,兼容性好。
- 修改PC版评论标签,使其适配手机:如果你的手机版模板结构复杂,或者需要更灵活的控制,可以修改PC版的标签。
下面我将详细介绍这两种方法,并提供完整的代码示例和注意事项。
使用织梦自带的手机评论标签(推荐)
织梦专门为手机版提供了 {dede:feedback} 标签,它已经内置了样式和分页逻辑,可以直接使用。
基础调用代码
将以下代码直接粘贴到你的手机版文章内容模板(通常是 article_article_m.htm)中,你想显示评论的位置。
<!-- 评论列表开始 -->
<div class="feedback">
<h3>评论列表 ({dede:field.id function="GetComNum(@me)"/})</h3>
<!-- 评论内容列表 -->
{dede:feedback row='10' titlelen='24' typeid=''}
<dl>
<dt>
<!-- 评论者头像 -->
<img src="[field:face function="GetFace(@me)"/]" alt="[field:uname/]" />
<!-- 评论者用户名 -->
<span class="username">[field:uname/]</span>
</dt>
<dd>
<!-- 评论时间 -->
<span class="time">[field:time function="MyDate('Y-m-d H:i',@me)"/]</span>
<!-- 评论内容 -->
<p class="msg">[field:msg/]</p>
</dd>
</dl>
{/dede:feedback}
<!-- 评论表单 -->
<form name="feedback" action="{dede:field name='phpurl'/}/feedback.php" method="post">
<input type="hidden" name="aid" value="{dede:field.id/}" />
<input type="hidden" name="action" value="send" />
<div class="form-group">
<label for="username">用户名:</label>
<!-- 如果未登录,显示用户名输入框;如果已登录,则显示用户名 -->
{dede:php}
if($cfg_ml->IsLogin()){
echo $cfg_ml->M_UserName;
} else {
echo '<input type="text" name="username" id="username" size="20" class="text" />';
}
{/dede:php}
</div>
<div class="form-group">
<label for="msg">评论内容:</label>
<textarea name="msg" id="msg" rows="4" class="textarea"></textarea>
</div>
<!-- 验证码 -->
<div class="form-group">
<label for="vdcode">验证码:</label>
<div class="code">
<input type="text" name="validate" id="vdcode" size="10" class="text" />
<img src="{dede:field name='phpurl'/}/vdimgck.php" width="60" height="24" style="height:24px;border:1px solid #ccc;" onclick="this.src='{dede:field name='phpurl'/}/vdimgck.php?'+Math.random();" />
</div>
</div>
<button type="submit" class="btn">发表评论</button>
</form>
<!-- 分页 -->
<div class="page">
{dede:pagebreak/}
</div>
</div>
<!-- 评论列表结束 -->
代码详解
{dede:feedback row='10' titlelen='24' typeid=''}:这是核心调用标签。row='10':显示10条评论。titlelen='24'长度(虽然评论没有标题,但保留此参数以防报错)。typeid='':指定栏目ID,留空表示调用当前文章的评论。
{dede:field.id function="GetComNum(@me)"/}:获取当前文章的评论总数。[field:face function="GetFace(@me)"/]:获取评论者的头像,如果用户没有上传头像,会调用默认头像。[field:uname/]:评论者的用户名。[field:time function="MyDate('Y-m-d H:i',@me)"/]:格式化评论时间。[field:msg/]:评论的具体内容。- 评论表单 (
<form>...):action="{dede:field name='phpurl'/}/feedback.php":提交评论到feedback.php处理。name="aid":文章ID,必须传递。name="action":值为send,表示是发送评论的动作。- 登录判断:使用
{dede:php}标签判断用户是否登录,如果已登录,直接显示用户名;如果未登录,则显示输入框,这能提升用户体验。
- 验证码:
<img src=".../vdimgck.php" ...>是织梦的验证码图片,点击可以刷新。
样式建议
为了让评论区域在手机上看起来更美观,你可以添加一些简单的CSS样式,在你的手机版CSS文件中添加:
.feedback {
padding: 15px;
background-color: #f9f9f9;
border-top: 1px solid #eee;
margin-top: 20px;
}
.feedback h3 {
font-size: 18px;
margin-bottom: 15px;
color: #333;
}
.feedback dl {
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.feedback dt {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.feedback dt img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
}
.feedback .username {
font-weight: bold;
color: #0066cc;
}
.feedback .time {
font-size: 12px;
color: #999;
margin-bottom: 5px;
}
.feedback .msg {
font-size: 14px;
line-height: 1.5;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input[type="text"],
.form-group textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* 确保padding不会影响宽度 */
}
.form-group .code {
display: flex;
align-items: center;
}
.form-group .code img {
margin-left: 10px;
cursor: pointer;
}
.btn {
width: 100%;
padding: 10px;
background-color: #0066cc;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
.btn:hover {
background-color: #0052a3;
}
.page {
text-align: center;
margin-top: 20px;
}
修改PC版评论标签(进阶)
如果你的手机版模板不是标准的织梦手机模板,或者你希望完全控制评论的HTML结构,可以沿用PC版的 {dede:loop} 标签,但需要做一些调整。
调用代码
<!-- 评论列表开始 -->
<div class="feedback">
<h3>评论列表 ({dede:field.id function="GetComNum(@me)"/})</h3>
{dede:loop table='dede_feedback' sort='dtime' row='10' titlelen='24'}
<div class="comment-item">
<div class="comment-user">
<!-- 头像 -->
<img src="[field:face function="GetFace(@me)"/]" alt="[field:uname/]" />
<span class="username">[field:uname/]</span>
</div>
<div class="comment-body">
<div class="comment-time">[field:time function="MyDate('Y-m-d H:i',@me)"/]</div>
<p class="comment-content">[field:msg/]</p>
</div>
</div>
{/dede:loop}
<!-- 评论表单和方法一中的完全一样 -->
<form name="feedback" action="{dede:field name='phpurl'/}/feedback.php" method="post">
... (表单代码省略,见方法一) ...
</form>
<!-- 分页 -->
<div class="page">
{dede:pagebreak/}
</div>
</div>
<!-- 评论列表结束 -->
与方法一的区别
- 核心标签:使用
{dede:loop}直接查询dede_feedback数据表。 - 无自动分页:
{dede:loop}本身不带分页功能,你需要手动实现分页逻辑,或者使用第三方分页插件,这比方法一复杂。 - 更灵活:你可以完全自定义
div的结构,比如添加“回复”按钮等。
注意:{dede:loop} 的分页功能较弱,如果需要分页,建议优先使用方法一的 {dede:feedback},如果坚持使用 loop,可以参考PC评论分页的实现方式,但这通常需要修改PHP文件,比较麻烦。
总结与注意事项
| 特性 | 方法一 ({dede:feedback}) |
方法二 ({dede:loop}) |
|---|---|---|
| 推荐度 | ⭐⭐⭐⭐⭐ (首选) | ⭐⭐ (备用) |
| 易用性 | 非常简单,开箱即用 | 较复杂,需手动处理分页 |
| 功能 | 包含列表、表单、分页 | 仅包含列表,分页需额外实现 |
| 灵活性 | 一般,受限于标签结构 | 非常高,可完全自定义HTML |
| 适用场景 | 标准织梦手机模板 | 定制化手机模板,需要特殊布局 |
重要注意事项:
-
开启评论功能:请确保你的后台已经开启了评论功能。
- 登录织梦后台 -> 系统 -> 系统基本参数 -> 核心设置。
- 找到 “是否开启评论功能”,选择“是”。
- 找到 “游客是否需要输入验证码”,建议选择“是”以防止垃圾评论。
-
检查手机版模板:确保你的手机版模板文件(如
article_article_m.htm)存在并且路径正确。 -
验证码问题:如果验证码不显示,请检查:
safe目录是否存在且有写入权限。php.ini中的GD库是否已开启。
-
CSS样式:务必添加CSS样式来美化评论区域,使其在手机上有良好的显示效果,方法一的CSS样式可以直接套用。
对于绝大多数用户来说,直接使用方法一的 {dede:feedback} 是最简单、最稳定、最高效的解决方案。
