如何获取并显示文章的评论列表,并支持评论分页功能?

在安企CMS中,高效地管理和展示文章评论是提升用户参与度和内容互动性的重要一环。作为一位熟悉安企CMS运营的专家,我将详细阐述如何在网站上获取并显示文章的评论列表,并支持评论分页功能,确保您的内容能够吸引并留住用户。

开启评论功能与后端准备

在深入前端模板开发之前,确保您的安企CMS后台已正确配置评论功能。通常,您可以在“功能管理”部分的“内容评论管理”中找到相关设置。这里可以启用或禁用评论、设置评论是否需要审核、以及配置反垃圾评论措施(如验证码)。未审核的评论(Status=0)默认不会显示在前台,确保您的评论经过审核或设置为免审状态(Status=1)才能正常显示。

获取文章评论列表

安企CMS通过其灵活的模板标签体系,提供了commentList标签来便捷地获取文章的评论数据。这个标签可以在您的文章详情页模板中直接使用,通常该模板位于/template/{您的模板名称}/{模型table}/detail.html路径下。

要获取特定文章的评论列表,您需要为commentList标签提供文章的ID。在文章详情页中,当前文章的ID可以通过archiveDetail标签轻松获取。例如,您可以这样定义一个评论列表:

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
    <div>
      <div>
        <span>
          {% if item.Status != 1 %}
          审核中:{{item.UserName|truncatechars:6}}
          {% else %}
          {{item.UserName}}
          {% endif %}
        </span>
        {% if item.Parent %}
        <span>回复</span>
        <span>
          {% if item.Status != 1 %}
          审核中:{{item.Parent.UserName|truncatechars:6}}
          {% else %}
          {{item.Parent.UserName}}
          {% endif %}
        </span>
        {% endif %}
        <span>{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
      </div>
      <div>
        {% if item.Parent %}
        <blockquote>
          {% if item.Parent.Status != 1 %}
          该内容正在审核中:{{item.Parent.Content|truncatechars:9}}
          {% else %}
          {{item.Parent.Content|truncatechars:100}}
          {% endif %}
        </blockquote>
        {% endif %}
        {% if item.Status != 1 %}
          该内容正在审核中:{{item.Content|truncatechars:9}}
        {% else %}
        {{item.Content}}
        {% endif %}
      </div>
      <div class="comment-control" data-id="{{item.Id}}" data-user="{{item.UserName}}">
        <a class="item" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
        <a class="item" data-id="reply">回复</a>
      </div>
    </div>
    {% endfor %}
{% endcommentList %}

在上述代码中,archiveId=archive.Id指定了获取当前文章的评论,type="list"表示获取一个简单的评论列表,limit="6"则限制了每次显示六条评论。循环中的item对象包含了评论的详细信息,例如UserName(评论者名称)、Content(评论内容)、CreatedTime(评论时间戳)、Status(审核状态)以及Parent(如果此评论是对另一条评论的回复,则包含父评论的信息)。stampToDate函数用于将时间戳格式化为可读的日期时间。

实现评论列表分页功能

当文章评论数量较多时,分页显示变得尤为重要,这不仅能提升页面加载速度,还能改善用户体验。为了实现评论分页,您需要将commentList标签的type参数设置为page,并配合pagination标签一起使用。

首先,在commentList中设定每页显示的评论数量(limit参数),并指定type="page"

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {% for item in comments %}
    {# 评论内容展示区域,与上文基础列表示例类似 #}
    <div>
      <div>
        <span>
          {% if item.Status != 1 %}
          审核中:{{item.UserName|truncatechars:6}}
          {% else %}
          {{item.UserName}}
          {% endif %}
        </span>
        {% if item.Parent %}
        <span>回复</span>
        <span>
          {% if item.Status != 1 %}
          审核中:{{item.Parent.UserName|truncatechars:6}}
          {% else %}
          {{item.Parent.UserName}}
          {% endif %}
        </span>
        {% endif %}
        <span>{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
      </div>
      <div>
        {% if item.Parent %}
        <blockquote>
          {% if item.Parent.Status != 1 %}
          该内容正在审核中:{{item.Parent.Content|truncatechars:9}}
          {% else %}
          {{item.Parent.Content|truncatechars:100}}
          {% endif %}
        </blockquote>
        {% endif %}
        {% if item.Status != 1 %}
          该内容正在审核中:{{item.Content|truncatechars:9}}
        {% else %}
        {{item.Content}}
        {% endif %}
      </div>
      <div class="comment-control" data-id="{{item.Id}}" data-user="{{item.UserName}}">
        <a class="item" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
        <a class="item" data-id="reply">回复</a>
      </div>
    </div>
    {% endfor %}
{% endcommentList %}

紧接着,在commentList标签的闭合之后,使用pagination标签来生成分页导航:

<div>
    {% pagination pages with show="5" %}
    <ul>
        <li>总数:{{pages.TotalItems}}条,总共:{{pages.TotalPages}}页,当前第{{pages.CurrentPage}}页</li>
        <li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
        {% if pages.PrevPage %}
            <li><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
        {% endif %}
        {% for item in pages.Pages %}
            <li class="{% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
        {% if pages.NextPage %}
            <li><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
        {% endif %}
        <li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
    </ul>
    {% endpagination %}
</div>

这里,pagination pages with show="5"将分页信息赋值给pages变量,并限制最多显示5个页码链接。pages对象包含了总评论数、总页数、当前页以及首页、末页、上一页、下一页和中间页码的链接和状态。通过循环pages.Pages,您可以构建出完整的分页导航。

这个评论列表和分页模块通常会被放置在文章详情页面的评论区,或者单独的comment/list.html模板文件中,然后通过{% include "comment/list.html" %}的方式引入到文章详情页。

评论提交与互动增强

除了显示评论,提供评论提交功能也是提升用户互动性的关键。用户可以通过一个表单提交评论,表单的action通常指向/comment/publish。表单字段包括archive_id(文章ID)、user_name(评论者名称)、content(评论内容)以及可选的parent_id(用于回复功能)。

此外,您还可以通过JavaScript实现评论点赞功能。每条评论的VoteCount字段存储了点赞数,您可以设置一个点击事件,通过AJAX向/comment/praise路径发送POST请求,携带评论ID来增加点赞数。

<!-- 评论提交表单示例 -->
<form method="post" action="/comment/publish">
  <input type="hidden" name="return" value="html"> {# 可选,指定返回格式为html或json #}
  <input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
  <div>
    <label for="user_name">您的昵称</label>
    <input type="text" id="user_name" name="user_name" required placeholder="请填写您的昵称" autocomplete="off">
  </div>
  <div>
    <label for="comment_content">评论内容</label>
    <textarea id="comment_content" name="content" required rows="5"></textarea>
  </div>
  <!-- 如果后台开启了验证码,这里需要添加验证码模块,参考tag-captcha.md -->
  <div>
    <button type="submit">提交评论</button>
    <button type="reset">重置</button>
  </div>
</form>

总结

通过上述步骤,您可以在安企CMS中灵活地获取、展示文章评论列表并支持分页功能。这不仅让您的网站内容更具吸引力,还能有效促进用户之间的互动,从而提升网站的整体活跃度。始终记得在进行任何模板修改后,检查后台缓存是否已更新,并清理浏览器缓存,以确保修改生效。

常见问题解答

Q1: 为什么我在文章详情页看不到评论,即使我已经发布了评论?

A1: 这通常是由于评论的审核状态导致的。请登录安企CMS后台,进入“功能管理”下的“内容评论管理”,检查您发布的新评论是否处于“待审核”状态(Status=0)。如果评论需要审核,您需要手动通过审核(将其状态更新为Status=1),或者在后台的评论设置中将评论设置为免审核