在使用安企CMS管理网站内容时,文档详情页面的评论功能是与读者互动的重要组成部分。有效地展示这些评论,并确保在评论数量增多时页面依然保持良好的加载速度和用户体验,就需要妥善处理评论列表的显示与分页。安企CMS提供了非常直观且强大的模板标签,帮助我们轻松实现这一目标。

理解评论列表的展示基础

要在文档页面上显示评论,我们主要会用到安企CMS内置的 commentList 标签。这个标签专门设计用于获取与特定文档相关的评论数据。当您位于一篇文档的详情页面时,这个标签会智能地识别当前文档的ID,无需手动指定,非常方便。

例如,在一个典型的文档详情模板中,您可以通过如下方式初步展示评论:

{# 假设我们正在一个文档详情页,archive.Id会自动被标签识别 #}
{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
    <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 %}
        {# 评论的发布时间,使用stampToDate过滤器进行格式化 #}
        <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</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>
    {% endfor %}
{% endcommentList %}

在上面的代码中,commentList 标签将评论数据赋值给了 comments 变量,并通过 for 循环遍历每一条评论。我们通过 item.UserName 获取评论者,item.Content 获取评论内容,item.CreatedTime 获取发布时间,并利用 stampToDate 过滤器将其格式化为易读的日期。值得注意的是,item.Status 可以用来判断评论是否已通过审核,而 item.Parent 则用于显示回复的上下文,这对于构建清晰的对话流至关重要。

实现评论列表的分页功能

当评论数量较多时,一次性加载所有评论会导致页面过长,影响用户体验和页面性能。这时,我们就需要引入分页功能。安企CMS的分页实现也非常简单,只需要对 commentList 标签的 type 参数进行调整,并结合 pagination 标签即可。

首先,将 commentList 标签的 type 参数从 list 改为 page,并设置 limit 参数来控制每页显示的评论数量。例如,我们设定每页显示10条评论:

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {# 评论列表的渲染方式与上方基本一致 #}
    {% for item in comments %}
    <div>
        {# ... 评论详情展示代码 ... #}
    </div>
    {% endfor %}
{% endcommentList %}

接下来,在 commentList 标签的下方,紧接着使用 pagination 标签来生成分页导航。pagination 标签会自动识别当前页面的分页上下文,并生成相应的页码链接。您可以根据需求通过 show 参数来指定在分页条中显示多少个页码按钮。

<div class="pagination">
    {% pagination pages with show="5" %}
    <ul>
        {# 首页链接 #}
        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
        {# 上一页链接 #}
        {% if pages.PrevPage %}
            <li class="page-item"><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
        {% endif %}
        {# 中间页码列表 #}
        {% for item in pages.Pages %}
            <li class="page-item {% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
        {# 下一页链接 #}
        {% if pages.NextPage %}
            <li class="page-item"><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
        {% endif %}
        {# 尾页链接 #}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
    </ul>
    {# 您还可以选择显示总评论数、总页数和当前页码等信息 #}
    <p>总数:{{pages.TotalItems}}条评论,总共:{{pages.TotalPages}}页,当前第{{pages.CurrentPage}}页。</p>
    {% endpagination %}
</div>

在这个分页代码中,pages 变量包含了所有与分页相关的信息,例如当前页码 (pages.CurrentPage)、总页数 (pages.TotalPages)、首页链接 (pages.FirstPage.Link)、上一页/下一页 (pages.PrevPage.Link, pages.NextPage.Link) 以及中间的页码列表 (pages.Pages)。通过遍历 pages.Pages,我们能够生成具体的页码链接,并通过 item.IsCurrent 判断当前页,从而添加相应的样式(例如 active 类)。

评论表单的集成

虽然本文主要围绕评论列表的显示与分页展开,但评论功能的核心也离不开评论提交。安企CMS同样提供了简洁的评论提交机制。一个基本的评论提交表单通常会像这样:

<form method="post" action="/comment/publish">
  <input type="hidden" name="return" value="html"> {# 提交后希望返回html内容 #}
  <input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}"> {# 隐藏字段,指定评论关联的文档ID #}
  <div>
    <label>用户名</label>
    <div>
      <input type="text" name="user_name" required placeholder="请填写您的昵称" autocomplete="off">
    </div>
  </div>
  <div>
    <label>评论内容</label>
    <div>
      <textarea name="content" placeholder="您的评论..." rows="5"></textarea>
    </div>
  </div>
  {# 如果后台开启了验证码,这里还需要添加验证码相关的输入框和图片 #}
  <div style="margin-top: 15px;">
    <button type="submit">提交评论</button>
    <button type="reset">重置</button>
  </div>
</form>

请注意,archive_id 是必须的隐藏字段,它告诉系统这条评论是针对哪篇文档的。如果您的网站后台开启了评论验证码,还需要在表单中增加验证码相关的字段和图片,具体实现可以参考安企CMS的文档说明。

通过以上步骤,您就可以在安企CMS搭建的网站中,优雅地展示文档评论列表,并结合分页功能,提供给读者一个流畅的阅读和互动体验。


常见问题 (FAQ)

1. 为什么我的评论列表没有显示任何评论,即使后台有评论数据? 这通常是由于评论的审核状态导致的。在安企CMS中,评论可能需要经过管理员审核才能在前台显示。请检查 commentList 标签内 item.Status 的判断逻辑,确保您展示了 Status = 1(已审核通过)的评论。如果后台设置了评论默认需要审核,那么新提交的评论在前台可能不会立即显示。

2. 我想为不同文档模型的评论列表设置不同的分页样式,应该怎么做? 安企CMS的模板系统支持高度定制。您可以根据文档模型ID(moduleId)在模板文件中使用 if 语句来判断,然后加载不同的分页样式或布局。例如,可以检查 archive.ModuleId 的值,然后应用不同的CSS类或引用不同的 partial 分页模板。此外,design-director.md 中提到模板支持自定义名称,例如 comment/list.html,您可以为不同模型的评论列表创建特定的评论模板,并在后台进行关联。

3. 如何在非文档详情页显示某个特定文档的评论列表?commentList 标签中,archiveId 参数是可以手动指定的。这意味着即使您不在文档详情页,只要知道目标文档的ID,就可以通过 {% commentList comments with archiveId="目标文档ID" type="page" limit="10" %} 的方式来获取并显示该文档的评论列表和分页。