How to display the document comment list and implement pagination?

When using AnQi CMS to manage website content, the comment function on the document detail page is an important part of interacting with readers.Effectively display these comments and ensure that the page maintains good loading speed and user experience when the number of comments increases, it is necessary to properly handle the display and pagination of the comment list.AnQi CMS provides very intuitive and powerful template tags, helping us easily achieve this goal.

Understanding the basics of displaying the comment list

To display comments on the document page, we mainly use the built-in Anqi CMScommentListThe tag is specifically designed to retrieve comment data related to a specific document.When you are on the detail page of a document, this tag will intelligently recognize the ID of the current document without the need to specify it manually, which is very convenient.

For example, in a typical document detail template, you can initially display comments in the following way:

{# 假设我们正在一个文档详情页，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 %}

In the code above,commentListThe label assigns comment data tocommentsthe variable, and throughforWe loop through each comment. We useitem.UserNameTo get the commenter,item.ContentTo get the comment content,item.CreatedTimeTo get the publish time, and usestampToDateThe filter formats it into a readable date. It is worth noting that,item.StatusIt can be used to determine if a comment has passed the review, anditem.ParentIt is used to display the context of the reply, which is crucial for building a clear conversation flow.

Implement pagination for the comment list.

When there are many comments, loading all comments at once can cause the page to become too long, affecting user experience and page performance.At this point, we need to introduce the pagination feature. The pagination implementation of Anqi CMS is also very simple, just need tocommentListlabel'stypeAdjust the parameters and combine withpaginationTag it and it is.

First, tocommentListlabel'stypeparameters fromlistchanged topage, and setlimitParameters to control the number of comments displayed per page. For example, we set each page to display 10 comments:

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

Next, incommentListBelow the label, use it immediatelypaginationtags to generate pagination navigation.paginationLabels will automatically identify the pagination context of the current page and generate corresponding page number links. You can specify how many page number buttons to display in the pagination bar according to your needs.showParameters to specify how many page number buttons to display in the pagination bar.

<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>

In this pagination code,pagesthe variable contains all information related to pagination, such as the current page number (pages.CurrentPage)、total number of pages (pages.TotalPages), first page link (pages.FirstPage.Link) and previous/next pages (pages.PrevPage.Link,pages.NextPage.Link) as well as the list of middle page numbers (pages.Pages.pages.Pageswe can generate specific page link, and throughitem.IsCurrentdetermine the current page, thus adding the corresponding style (such asactiveclass).

comment form integration

Although this article mainly focuses on the display and pagination of the comment list, the core of the comment function also cannot be separated from the submission of comments.AnQi CMS also provides a simple comment submission mechanism.A basic comment submission form would usually look like this:

<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>

Please note,archive_idIt is a mandatory hidden field that tells the system which document this comment is for.If your website backend has enabled comment captcha, you also need to add captcha-related fields and images in the form. For specific implementation, please refer to the Anqi CMS documentation.

By following these steps, you can elegantly display the document comment list on the website built with Anqi CMS, and combine it with pagination features to provide readers with a smooth reading and interactive experience.

Frequently Asked Questions (FAQ)

1. Why is my comment list not displaying any comments, even though there is comment data on the backend?This is usually due to the review status of comments. In AnQi CMS, comments may need to be reviewed by an administrator before they can be displayed on the front page. Please check.commentListWithin the tag.item.StatusThe judgment logic ensures that you have displayedStatus = 1(Reviewed and approved) comments. If the background is set to require review for comments by default, then newly submitted comments may not be displayed on the front page immediately.

2. How can I set different pagination styles for the comment lists of different document models?The AnQi CMS template system supports high customization. You can use the document model ID in the template file (moduleId) in the template file.ifJudgment statements, then load different pagination styles or layouts. For example, you can checkarchive.ModuleIdThe value, then apply different CSS classes or refer to differentpartialPagination templates. In addition,design-director.mdIt mentions that the template supports custom names, for examplecomment/list.htmlYou can create specific comment templates for different model comment lists and associate them in the background.

How to display the comment list of a specific document on a non-document detail page?IncommentListTagged,archiveIdThe parameter can be manually specified. This means that even if you are not on the document details page, as long as you know the ID of the target document, you can{% commentList comments with archiveId="目标文档ID" type="page" limit="10" %}the way to get and display the comment list and pagination of the document.