织梦手机版调用评论

99ANYc3cd6
预计阅读时长 30 分钟
位置: 首页 织梦建站 正文
  1. 使用织梦自带的手机标签:这是最简单、最推荐的方法,专为手机版模板设计,兼容性好。
  2. 修改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
适用场景 标准织梦手机模板 定制化手机模板,需要特殊布局

重要注意事项:

  1. 开启评论功能:请确保你的后台已经开启了评论功能。

    • 登录织梦后台 -> 系统 -> 系统基本参数 -> 核心设置
    • 找到 “是否开启评论功能”,选择“是”。
    • 找到 “游客是否需要输入验证码”,建议选择“是”以防止垃圾评论。
  2. 检查手机版模板:确保你的手机版模板文件(如 article_article_m.htm)存在并且路径正确。

  3. 验证码问题:如果验证码不显示,请检查:

    • safe目录 是否存在且有写入权限。
    • php.ini 中的 GD库 是否已开启。
  4. CSS样式:务必添加CSS样式来美化评论区域,使其在手机上有良好的显示效果,方法一的CSS样式可以直接套用。

对于绝大多数用户来说,直接使用方法一的 {dede:feedback} 是最简单、最稳定、最高效的解决方案。

-- 展开阅读全文 --
头像
dede采集分页规则如何设置?
« 上一篇 昨天
手机端图片过大怎么解决?
下一篇 » 今天

相关文章

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