In AnQiCMS template, elegantly display the article comment list and pagination

The article comment is an important part of website interaction, which not only enhances user engagement but also brings richer discussion and value to the website content.For operators, how to clearly and efficiently display these comments on the page and support pagination is the key to improving user experience.AnQiCMS provides a set of intuitive and powerful template tags to help you achieve this goal easily.

Understand the basic of AnQiCMS template

AnQiCMS uses a template engine syntax similar to Django, which makes template development both flexible and easy to learn. In the template files, you will see two main tag forms: double curly braces{{变量}}Used to output variable content, while single curly braces and percentage signs{% 标签 %}are used to control logic (such as loops, conditional judgments) or call specific functions. Template files are usually.htmlFor suffix, and stored uniformly/templatethe directory.

To implement the display of comment lists and support pagination on the article detail page, we mainly use two core tags:commentListUsed to obtain comment data,paginationUsed to generate pagination navigation.

To get the article comment list:commentListtags

commentListThe tag is a tool specifically used in AnQiCMS to retrieve article comment data. It can help you easily extract comments from a specific article.

When using this tag, there are several key parameters that you need to pay attention to:

  • archiveIdThis is the most important parameter, it tells the system which article's comments you want to get. Usually, in the article detail page, the current article's ID is automatically taken asarchive.Idsuch variables provided.
  • typeThis parameter determines the type of list you want to retrieve. If set tolist, it will simply return the specified number of comments; if set topageIt will enable pagination for the comment list, so that subsequent cooperation is possiblepaginationUse the label.
  • limit: Used to control how many comments are displayed per page. For example,limit="10"means 10 comments are displayed per page.
  • order：You can specify the sorting method for comments, for example, descending order by ID (id desc) or ascending order (id asc).

When you go throughcommentListLabel gets the comment data and returns an array of comment objects. You can iterate over this array and access the properties of each comment object, such as the comment ID (Id)、用户名 (English)UserName)、comment content (Content)、点赞数 (English)VoteCount)、English creation time (CreatedTime) 等。值得一提的是，评论内容还可能包含回复（即(English)Parent对象)，以及评论的审核状态 (English)Status)，these information can be flexibly displayed in the template.

Implement the comment pagination function:paginationtags

OncecommentListTagstypeparameter settingspageAt this point, the comment data has the ability to paginate.paginationTags can fully display their capabilities, automatically generating a complete set of pagination navigation for you.

paginationCommon parameters used by tags are:showIt specifies the maximum number of pagination buttons that can be displayed in the navigation, for example:show="5"It will display up to 5 page numbers around the current page.

paginationTags will provide a total number of items (TotalItems), total number of pages (TotalPages), current page (CurrentPage), first page (FirstPage)、末页 (English)LastPage)、上一页 (English)PrevPage)、下一页 (English)NextPage)，以及中间页码数组 (English)Pages) 等信息的对象。您可以通过循环 (English)PagesArray to build page number buttons, andIsCurrentAttribute to determine the current page, thereby adding the corresponding style.

Actual operation in the template

Typically, we will be inarchive/detail.htmlComment feature integrated into such an article detail template.

Firstly, make sure you can get the current article's ID. This is usually done through{{archive.Id}}directly obtaining, or using{% archiveDetail archiveInfo with name="Id" %}to make it more explicit.

Then, we can build the comment list and pagination.

Display the comment list

The following code snippet demonstrates how to display the comment list on the article detail page template and handle the review status and reply relationship.

English

Reader Comments

{% commentList comments with archiveId=currentArchiveId type="page" limit="10" order="id desc" %} {% for item in comments %}
{% if item.Status != 1 %}Under review:{% if item.Parent %}Reply {% if item.Parent.Status != 1 %} EnglishUnder review:{% endif %}{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}
{% if item.Parent %}

{% if item.Parent.Status !

{% endif %}

{% if item.Status !=

赞({{item.VoteCount}}) Reply
{% empty %}

No comments yet, come and share your thoughts!

{% endfor %} {% endcommentList %}
{# 评论分页代码 #}
<div class="comment-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>
    {% endpagination %}
</div>

{# 评论提交表单 #}
<div class="comment-form-section">
    <h3>发表评论</h3>
    <form method="post" action="/comment/publish" class="comment-submit-form">
        <input type="hidden" name="return" value="html">
        <input type="hidden" name="archive