How to display the user submitted comment list on a website and support pagination?

Displaying user comments on a website and supporting pagination is an important element in enhancing content interactivity and user experience.AnQiCMS provides flexible template tags and data management functions, allowing us to easily meet this requirement.Next, let's look at how to operate step by step.

Comment feature: make the content more vibrant

We all know that user comments are a reflection of the vitality of website content.They can not only bring real user feedback to the website but also effectively increase the freshness of the page and the attention of search engines.In AnQiCMS, displaying these comments and providing a good browsing experience (such as pagination) is a very direct and practical operation.

In general, we would display comments related to the content at the bottom of an article or product detail page.The AnQiCMS template system is very flexible, we can easily render comment data to the page by using the specific tags it provides.

Core tags for displaying the comment list:commentList

We need to use AnQiCMS'scommentListtag. This tag is specifically designed to retrieve and display comment data.

First, you need to determine where the comment should be displayed below an article or content. On the document details page, we are usually able to pass througharchiveDetailThe tag retrieves the ID of the current document. This ID will be the key parameter for fetching comments.

commentListThe basic usage of the tag is roughly like this:

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

There are several important parameters in this.

• commentsThis is the variable name you define for the comment list data, you can name it as needed. In{% endcommentList %}we will pass throughcommentsthis variable to iterate over each comment.
• archiveId=archive.IdThis is to tell the system which document's comments to retrieve.archive.IdIt is through other tags (such asarchiveDetail) The document ID has been obtained. If you want to specify comments for other documents, you can also directly fill in the specific ID, for examplearchiveId="1".
• type="page"This parameter is very critical. It indicates that we want to display comments in a paginated form rather than simply listing all comments. This lays the foundation for adding pagination navigation later.
• limit="10"This defines how many comments are displayed per page. You can adjust this number based on the design of the website and user habits, for examplelimit="5"orlimit="20".

In{% commentList %}and{% endcommentList %}between, we can useforto loop throughcommentsEach comment in the variable indicated:

{% 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 %}

We utilized in the above code:itemSeveral commonly used fields of the variable:

• item.UserName: Nickname of the comment user.
• item.Content:The specific content of the comment. Here we used:|safeFilter to ensure that the HTML tags in the comment content can be parsed correctly (if your comment editor supports rich text).
• item.CreatedTime: The timestamp of the comment published bystampToDateLabel it to format it as a readable date and time.
• item.Status: The review status of the comment, usually1Indicates that the review has passed. We can provide a prompt based on this status when displaying.
• item.VoteCount: Number of likes on the comment.
• item.ParentIf this comment is a reply to another comment,item.Parentit will contain the object data of the parent comment, which is very useful for implementing nested reply comments in comment levels.

Add pagination navigation:paginationTag

SincecommentListuptype="page"Then we can add pagination navigation. AnQiCMS providespaginationtags to help us generate standard pagination links.

paginationtags usually followcommentListafter the tag:

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

HerepagesThe variable contains all information related to pagination:

• pages.TotalItems: Total number of comments.
• pages.TotalPages: Total number of pages.
• pages.CurrentPage: Current page number.
• pages.FirstPage.Linkandpages.FirstPage.Name: Link and display name of the homepage.
• pages.PrevPage.Linkandpages.PrevPage.Name: Link and display name of the previous page.
• pages.NextPage.Linkandpages.NextPage.Name: Link and display name of the next page.
• pages.LastPage.Linkandpages.LastPage.Name: The link and display name on the last page.
• pages.Pages: An array containing all the middle page number information, we can go throughforloop.
• pageItem.IsCurrent: Used to determine if the current page number is active, making it convenient to add CSS styles.

show="5"The parameter controls the maximum number of page buttons displayed in the pagination navigation, which can prevent too many page numbers from being displayed