How to display the comment list of articles in AnQiCMS template and support pagination?

Display article comment list and pagination elegantly in AnQiCMS template

Article comments are an important part of website interaction, as they not only enhance user engagement but also bring richer discussions 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, allowing you to easily achieve this goal.

Understand the basic of AnQiCMS template

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

To implement displaying a comment list and supporting pagination on the article detail page, we mainly use two core tags:commentListused to retrieve comment data, as well aspaginationused to generate pagination navigation.

Get the article comment list:commentListTag

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

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

• archiveIdThis is the most important parameter, it tells the system which article's comments you want to get. Usually, the current article's ID will be automatically provided as such a variable.archive.Idsuch a variable.
• 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 for subsequent cooperationpaginationlabel usage
• limit: Used to control how many comments are displayed per page. For example,limit="10"which means 10 comments are displayed per page.
• order: You can specify the sorting method of comments, such as descending order by ID (id desc) or ascending order (id asc).

When you go throughcommentListThe tag retrieves 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)、Username (UserName)、Comment content (Content)、Likes (VoteCount), Creation time (CreatedTime) etc. It is worth mentioning that the comment content may also contain replies (i.e.')ParentAn object, as well as the review status (Status) can be flexibly displayed in the template.

To implement the comment pagination feature:paginationTag

OncecommentListlabel'stypethe parameter topage, the comment data has the ability to be paginated. At this time,paginationthe tag can fully show its skills, automatically generating a complete set of pagination navigation for you.

paginationCommon parameters for tags areshowIt specifies the maximum number of page number buttons to be displayed in the pagination navigation, for exampleshow="5"It will display up to 5 page numbers around the current page.

paginationThe label will provide a total number of records (TotalItems), Total number of pages (TotalPages)、current page (CurrentPage) Home page (FirstPage) End page (LastPage) Previous page (PrevPage) Next page (NextPage) And the middle page number array (PagesAn object with this information. You can use a loop toPagesarray to build page number buttons, and useIsCurrentthe attribute to judge the current page, so as to

perform operations in the template

We usually integratearchive/detail.htmlcomment features into such article detail templates.

First, make sure you can get the ID of the current article. This is usually done through{{archive.Id}}Directly obtain, or use{% archiveDetail archiveInfo with name="Id" %}To obtain more explicitly.

Next, 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:

”`twig {# Get the current article ID to associate comments #} {% archiveDetail currentArchiveId with name=“Id” %}

{# 评论分页代码 #}
<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