在网站上展示用户评论并支持分页，是提升内容互动性和用户体验的重要环节。AnQiCMS 提供了灵活的模板标签和数据管理功能，让我们可以轻松实现这一需求。下面，我们就来一步步看看如何操作。

评论功能：让内容更具活力

我们都知道，用户评论是网站内容生命力的体现。它们不仅能为网站带来真实的用户反馈，还能有效增加页面的新鲜度和搜索引擎的关注。在 AnQiCMS 中，展示这些评论并提供良好的浏览体验（比如分页），是一个非常直接且实用的操作。

通常来说，我们会在文章或产品详情页的底部，展示与该内容相关的评论。AnQiCMS 的模板系统非常灵活，我们可以利用它提供的特定标签，轻松地将评论数据渲染到页面上。

显示评论列表的核心标签：commentList

要在页面上展示评论，我们需要用到 AnQiCMS 的 commentList 标签。这个标签专门设计用于获取和呈现评论数据。

首先，你需要确定评论要显示在哪篇文章或哪个内容的下方。在文档详情页中，我们通常已经能够通过 archiveDetail 标签获取到当前文档的 ID。这个 ID 将是我们获取评论的关键参数。

commentList 标签的基本用法大致是这样的：

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {# 评论列表将在这里循环显示 #}
{% endcommentList %}

这里面有几个重要的参数：

  • comments：这是你为评论列表数据定义的变量名，你可以根据需要自行命名。在 {% endcommentList %} 标签之间，我们将通过 comments 这个变量来遍历每一条评论。
  • archiveId=archive.Id：这是告诉系统要获取哪个文档的评论。archive.Id 是在当前文档详情页中通过其他标签（如 archiveDetail）已经获取到的文档 ID。如果你想指定其他文档的评论，也可以直接填写具体的 ID，例如 archiveId="1"。
  • type="page"：这个参数非常关键。它表示我们希望以分页的形式展示评论，而不是简单地列出所有评论。这为后续添加分页导航奠定了基础。
  • limit="10"：这定义了每页显示多少条评论。你可以根据网站的设计和用户习惯来调整这个数字，比如 limit="5" 或 limit="20"。

在 {% commentList %} 和 {% endcommentList %} 之间，我们就可以使用 for 循环来遍历 comments 变量中的每一条评论了：

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {% for item in comments %}
        <div class="comment-item">
            <div class="comment-meta">
                {# 判断评论状态：AnQiCMS 提供了评论审核功能，status=1 表示审核通过 #}
                {% if item.Status != 1 %}
                    <span>审核中：{{ item.UserName|truncatechars:6 }}</span>
                {% else %}
                    <span>{{ item.UserName }}</span>
                {% endif %}

                {# 如果是回复评论，可以显示被回复的用户名 #}
                {% if item.Parent %}
                    <span>回复</span>
                    <span>
                        {% if item.Parent.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 class="comment-content">
                {% if item.Parent %}
                <blockquote class="reply-quote">
                    {% if item.Parent.Status != 1 %}
                    该内容正在审核中：{{item.Parent.Content|truncatechars:9}}
                    {% else %}
                    {{item.Parent.Content|truncatechars:100}}
                    {% endif %}
                </blockquote>
                {% endif %}

                {% if item.Status != 1 %}
                    <p class="pending-review">该内容正在审核中：{{ item.Content|truncatechars:9 }}</p>
                {% else %}
                    <p>{{ item.Content }}</p>
                {% endif %}
            </div>
            <div class="comment-actions">
                <a href="javascript:;" class="like-btn" data-comment-id="{{ item.Id }}">赞({{ item.VoteCount }})</a>
                <a href="javascript:;" class="reply-btn" data-comment-id="{{ item.Id }}" data-user-name="{{ item.UserName }}">回复</a>
            </div>
        </div>
    {% empty %}
        <p>目前还没有评论，快来发表你的看法吧！</p>
    {% endfor %}
{% endcommentList %}

在上面的代码中，我们利用了 item 变量的几个常用字段：

  • item.UserName：评论用户的昵称。
  • item.Content：评论的具体内容。这里使用了 |safe 过滤器，以确保评论内容中的 HTML 标签能够正确解析（如果你的评论编辑器支持富文本）。
  • item.CreatedTime：评论的发布时间戳，通过 stampToDate 标签将其格式化为可读的日期时间。
  • item.Status：评论的审核状态，通常 1 表示审核通过。我们可以在显示时根据这个状态给出提示。
  • item.VoteCount：评论的点赞数量。
  • item.Parent：如果这条评论是对其他评论的回复，item.Parent 会包含父级评论的对象数据，这对于实现评论楼层嵌套回复非常有用。

添加分页导航：pagination 标签

既然 commentList 设置了 type="page"，那么接下来我们就可以添加分页导航了。AnQiCMS 提供了 pagination 标签来帮助我们生成标准的分页链接。

pagination 标签通常紧跟在 commentList 标签之后：

<div class="pagination-nav">
    {% pagination pages with show="5" %}
        <ul>
            {# 显示首页链接 #}
            <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 pageItem in pages.Pages %}
                <li class="{% if pageItem.IsCurrent %}active{% endif %}">
                    <a href="{{ pageItem.Link }}">{{ pageItem.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>
        <p>总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</p>
    {% endpagination %}
</div>

这里 pages 变量包含了所有分页相关的信息：

  • pages.TotalItems：评论总条数。
  • pages.TotalPages：总页数。
  • pages.CurrentPage：当前页码。
  • pages.FirstPage.Link 和 pages.FirstPage.Name：首页的链接和显示名称。
  • pages.PrevPage.Link 和 pages.PrevPage.Name：上一页的链接和显示名称。
  • pages.NextPage.Link 和 pages.NextPage.Name：下一页的链接和显示名称。
  • pages.LastPage.Link 和 pages.LastPage.Name：末页的链接和显示名称。
  • pages.Pages：一个包含所有中间页码信息的数组，我们可以通过 for 循环遍历它。
  • pageItem.IsCurrent：用于判断当前页码是否是激活状态，方便我们添加 CSS 样式。

show="5" 参数则控制了在分页导航中最多显示多少个页码按钮，这样可以避免页码过多