How to implement pagination display of article lists in Anqi CMS?

In a content management system, pagination display of the article list is a basic and important feature.It can effectively manage a large amount of content, improve the loading speed of the website, avoid users feeling tired facing endless scrolling pages, and is a key part of search engine optimization (SEO), helping search engines better crawl and index website content.For users using AnQiCMS, implementing pagination for the article list is straightforward and powerful, thanks to its flexible and Django-like template engine.

The AnQi CMS template system provides us with two core tags, which are the foundation for implementing article list pagination:archiveList(used to obtain article data) andpagination(Used for generating pagination navigation). Next, we will discuss in detail how to use these tags to elegantly implement pagination on your website.

Understand the acquisition of article list data:archiveListTag

archiveListTags are the main tools used in Anqi CMS to query and display article lists. To implement pagination, we need to pay special attention to several of its parameters:

  1. type="page"This is the key instruction for implementing pagination. When you willtypethe parameter to"page"then,archiveListThe tag will automatically enable pagination mode and pass the pagination information of the current page (such as the current page number, total number of pages, etc.) to the template context, forpaginationlabel usage
  2. limitThis parameter is used to control the number of articles displayed per page. For example,limit="10"it means that 10 articles will be displayed per page.
  3. moduleIdandcategoryId: If you want to get a specific content model (such as "article model" or "product model") or articles under a specific category, you can use these two parameters for filtering.
  4. q(search keyword)If your article list needs to support keyword search functionality, and the search results should also be paginated,archiveListtags will automatically handle the parameters in the URL ofqthe search results will be displayed with pagination.

By combining these parameters,archiveListFlexibly obtain the article data you need to display. For example, to obtain an article list with 10 articles displayed per page and support pagination under the "Article Model", you can write it like this:

{% archiveList archives with moduleId="1" type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <div>{{item.Description}}</div>
            <div>
                <span>{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>{{item.Views}} 阅读</span>
            </div>
        </a>
        {% if item.Thumb %}
        <a href="{{item.Link}}">
            <img alt="{{item.Title}}" src="{{item.Thumb}}">
        </a>
        {% endif %}
    </li>
    {% empty %}
    <li>
        当前分类下暂无文章。
    </li>
    {% endfor %}
{% endarchiveList %}

In the code above, we usearchiveListobtained the article data andforLoop througharchivesvariables to display the title, description, category, publish date, views, and thumbnail of each article.{% empty %}Block handles the case where the list is empty.

Second: build pagination navigation:paginationTag

InarchiveListTag enabledtype="page"After that, the page context will automatically include apagesObject, this object contains all information related to pagination.paginationThe role of the tag is to utilize thispagesObject, generating a complete and interactive pagination navigation.

paginationThe core parameter of the tag isshowIt is used to control how many adjacent page number buttons are displayed in the middle area of the pagination navigation, in addition to 'Home', 'Previous Page', 'Next Page', and 'Last Page'. For example,show="5"It will display the current page number with 2 on each side, totaling 5 page numbers.

The followingpaginationThe commonly used structure of the tag and itspagesKey properties included in the object:

  • pages.TotalItems: Total number of articles.
  • pages.TotalPages: Total number of pages.
  • pages.CurrentPage: Current page number.
  • pages.FirstPage: Home page information (includingNameandLinkAttribute, as wellIsCurrentDetermine if it is the current page).
  • pages.PrevPage: Previous page information (also includes)Name/Link/IsCurrent)
  • pages.NextPage: Next page information."),
  • pages.LastPage: End page information.
  • pages.Pages: An array that contains the page number button information in the middle part, each element hasName/Link/IsCurrentProperty.

You can traversepages.Pagesthe array and combineifthe statement to judgeIsCurrentHighlight the current page to build a complete pagination navigation.

    {# 分页代码 #}
    <div class="pagination-container">
        {% pagination pages with show="5" %}
            <ul class="pagination">
                {# 首页按钮 #}
                <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                    <a class="page-link" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
                </li>
                {# 上一页按钮 #}
                {% if pages.PrevPage %}
                <li class="page-item">
                    <a class="page-link" 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 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}}">{{pages.NextPage.Name}}</a>
                </li>
                {% endif %}
                {# 末页按钮 #}
                <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                    <a class="page-link" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
                </li>
            </ul>
        {% endpagination %}
    </div>

In this pagination code block, we first use{% pagination pages with show="5" %}to initialize the pagination data. Then, according topagesThe properties in the object are built one by one, 'Home', 'Previous Page', 'Middle Page Numbers', 'Next Page', and 'Last Page' links. Through{% if item.IsCurrent %}Determine the current page and add it toactiveA class to highlight through CSS.

Chapter 3: Integration: An example of a complete pagination list display

toarchiveListandpaginationTags combined, usually placed in the article list page template (for examplearchive/list.htmlorcategory/list.html), can realize the dynamic pagination function of articles.

``twig <!DOCTYPE html>

<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</title>
<style>
    .article-list { list-style: none; padding: 0; }
    .article-list li { margin-bottom: 15px