How to control the display sorting and pagination of AnQiCMS comment list?

In Anqi CMS, efficiently managing and displaying website comments is crucial for enhancing user interaction and optimizing content experience.The display order and pagination settings of the comment list directly affect the user's experience when browsing comments.This article will give you a detailed explanation of how to accurately control the sorting and pagination behavior of comments in AnQiCMS.

Understand the template structure of the comment list

Firstly, we need to clarify the position of the comment list in AnQiCMS. According to the system's design conventions, the comment list is usually located in the current template directory ofcomment/list.htmlRendering in the file.This file is the core of your custom settings.AnQiCMS uses a syntax similar to Django template engine, controlling data through specific tags.

Core tags:commentListand its parameters

To control the comment list, we mainly rely oncommentListThe tag is responsible for retrieving comment data from the database. It provides a series of parameters that allow you to flexibly define the way comments are retrieved.

when you arecomment/list.htmlWhen calling the comment list, you will usually see a structure like this:

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {# 评论循环体 #}
{% endcommentList %}

HerearchiveId=archive.IdIt represents getting the comments of the current article. Next, we will focus ontype/limitandorderthese key parameters.

Control the display order of comments

The display order of comments is determined byorderThe parameter. You can set different values to determine the sorting method of comments.

• Sort by the most recent post (default)If you want the latest comments to appear at the top, you can useorder="id desc". This is a common sorting method to ensure that users can see the latest discussions.
• Sort by earliest published: If you want the comments to be arranged in chronological order, with the earliest comments first, you can useorder="id asc".

For example, if you want comments to be sorted in reverse chronological order (with the most recent comments first), you cancommentListset the tag as follows:

{% commentList comments with archiveId=archive.Id type="page" limit="10" order="id desc" %}
    {# 循环显示评论内容 #}
    {% for item in comments %}
        <div>
            <!-- 显示评论用户名、时间、内容等 -->
            <span>{{item.UserName}}</span>
            <span>{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
            <p>{{item.Content}}</p>
            {% if item.Parent %}
                <blockquote>回复：{{item.Parent.UserName}} - {{item.Parent.Content}}</blockquote>
            {% endif %}
        </div>
    {% endfor %}
{% endcommentList %}

By modifyingorderParameter, you can easily adjust the display order of comments to meet the interactive needs of the website.

Implement pagination for the comment list.

For pages with a large number of comments, pagination is an essential feature, as it can prevent the page from being too long, improve loading speed, and enhance user experience. Implementing comment pagination in AnQiCMS requirescommentListwith the tag andpaginationThe combination of tags.

1. settingcommentListFor pagination mode: Firstly, incommentListIn the tag, you need totypethe parameter to"page", and uselimitThe parameter is used to specify how many comments to display per page. For example, display 10 comments per page:

   {% commentList comments with archiveId=archive.Id type="page" limit="10" order="id desc" %}
       {# 评论循环体 #}
   {% endcommentList %}
   

   HerecommentsThe variable will only contain the comment data for the current page.

2. UsepaginationThe tag generates pagination navigation: IncommentListThe closing tag of the tag{% endcommentList %}After that, use it immediatelypaginationTags to render pagination navigation.paginationThe label will be based oncommentListThe total number of comments provided and the number of comments displayed per page, automatically generate "Previous page

   paginationA label usually needs oneshowThe parameter controls how many page number buttons are displayed in the pagination navigation, for exampleshow="5"this means that up to 5 page number buttons are displayed.

   A complete pagination navigation example code may look like this:

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

   pagesThe variable contains all the information needed for pagination, such as total number of items, total number of pages, current page number, and links to each page, you can build a user-friendly pagination interface through loops and conditional judgments.

Combined example: Sorting and pagination applied simultaneously

Combine sorting and pagination features, yourcomment/list.htmlThe relevant code snippet in the file may look like this:

{# 评论列表部分 #}
{% commentList comments with archiveId=archive.Id type="page" limit="10" order="id desc" %}
    <div class="comment-list-container">
        {% for item in comments %}
            <div class="comment-item">
                <span class="comment-author">{{item.UserName}}</span>
                <span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
                {% if item.Status == 1 %} {# 确保只显示已审核的评论 #}
                    <p class="comment-content">{{item.Content}}</p>
                    {% if item.Parent %}
                        <blockquote class="reply-quote">回复 @{{item.Parent.UserName}}: {{item.Parent.Content}}</blockquote>
                    {% endif %}
                {% else %}
                    <p class="comment-content">评论正在审核中...</p>
                {% endif %}
                {# 其他评论操作，如点赞、回复等 #}
            </div>
        {% endfor %}
    </div>
{% empty %}
    <p class="no-comments">暂无评论，快来发表您的看法吧！</p>
{% endcommentList %}

{# 分页导航部分 #}
<div class="pagination-container">
    {% pagination pages with show="5" %}
        <nav aria-label="Page navigation">
            <ul class="pagination">
                {% if pages.FirstPage and not pages.FirstPage.IsCurrent %}
                    <li class="page-item"><a class="page-link" href="{{pages.FirstPage.Link}}">首页</a></li>
                {% endif %}
                {% if pages.PrevPage %}
                    <li class="page-item"><a class="page-link" href="{{pages.PrevPage.Link}}">上一页</a></li>
                {% endif %}
                {% for item in pages.Pages %}
                    <li class="page-item {% if item.IsCurrent %}active{% endif %}"><a class="page-link" href="{{item.Link}}">{{item.Name}}</a></li>
                {% endfor %}
                {% if pages.NextPage %}
                    <li class="page-item"><a class="page-link" href="{{pages.NextPage.Link}}">下一页</a></li>
                {% endif %}
                {% if pages.LastPage and not pages.LastPage.IsCurrent %}
                    <li class="page-item"><a class="page-link" href="{{pages.LastPage.Link}}">尾页</a></li>
                {% endif %}
            </ul>
        </nav>
    {% endpagination %}
</div>

By such configuration, you can provide an orderly and easy-to-navigate comment section for your AnQiCMS website, greatly enhancing user participation and the professionalism of the website.Remember to clear the system cache after each modification of the template file to ensure that your changes take effect immediately.

Frequently Asked Questions (FAQ)

How to control the review status of comments to ensure that only approved comments are displayed?

In AnQiCMS, comments will have a certain status after being published.StatusThe field indicates its review status. In the loop of the comment list, you can judgeitem.StatusThe value to decide whether to display the comment. Usually,Status = 1Indicates that the review has passed. It already includes the examples above.{% if item.Status == 1 %}The condition judgment ensures that only comments that have passed the review are displayed with specific content, otherwise the prompt 'Comments are being reviewed...' is displayed.The background "Content Comment" feature module allows you to manually review, delete, and other operations on comments.

2. Can you display a list of comments for different articles on the same page?

Can.commentListlabel'sarchiveIdThe parameter allows you to specify the article ID to retrieve comments. If you need to display comments lists for different articles on the same page (for example, showcasing the latest comments of multiple related articles on a special page), you just need to specify each one as needed.commentListPass the corresponding article ID. For example:

{# 文章A的评论 #}
{% commentList commentsA with archiveId=123 type="list" limit="5" order="id desc" %}...{% endcommentList %}

{# 文章B的评论 #}
{% commentList commentsB with archiveId=456 type="list" limit="5" order="id desc" %}...{% endcommentList %}

3. How to ensure the performance of loading and pagination of the comment list?

AnQiCMS is developed based on Go language, which has a natural advantage in data processing and concurrency. For the comment list, performance optimization mainly focuses on the following points:

• Reasonable settingslimitParameterDo not load too many comments at once, keep the number of comments displayed per page reasonable (such as 10-20), and reduce the amount of data requested in one go.
• Database indexEnsure that the comments tablearchive_idandidThe field has an appropriate database index, AnQiCMS will usually handle this automatically.
• Template cache: AnQiCMS supports template caching, if the comment content does not change frequently, it can use template caching to reduce rendering overhead.
• Front-end optimizationIf the number of comments is particularly large, consider combining with front-end lazy loading or Ajax dynamic loading technology to further optimize the user experience.