How to combine `archiveList` with `pagination` tag to implement pagination navigation for document list?

As an experienced website operation expert, I am well aware of the importance of an efficient content management system (CMS) for website operation, and AnQiCMS (AnQiCMS) provides us with great convenience with its high concurrency characteristics of Go language and flexible template mechanism.Among many features, how to effectively display a large number of documents and provide friendly pagination navigation is crucial for improving user experience and content accessibility.Today, let's delve deeperarchiveListHow to combine tags withpaginationThe tags cleverly combine to implement the pagination navigation function of the document list.

In the AnQiCMS template system,archiveListTags are the core tools used to obtain the document list, andpaginationTags focus on generating beautiful and practical pagination navigation. They do not operate independently, but work together to form a complete document pagination display solution.Understanding the functionality and collaboration mechanism of these tags is the foundation for building high-performance, user-friendly websites.

archiveList: Build the core of the document list.

First, let's get to knowarchiveListThe label. It is mainly responsible for retrieving and outputting a collection of documents that meet specific conditions. When we want to add pagination to the document list,archiveListis a key parameter——typeIt is particularly important.

When we willarchiveListoftypethe parameter to"page"When, the AnQiCMS system will understand that we not only need to obtain the document data of the current page, but also need the system to provide all the metadata required for pagination, such as the total number of documents, total number of pages, current page number, etc. This metadata is exactlypaginationThe basic page navigation tag is generated.

excepttype="page"other than,archiveListIt also supports a rich set of parameters for precise control of document filtering and sorting, such as:

• moduleId: Specify which content model document to retrieve (such as article model or product model).
• categoryId: Specify which category or multiple categories of documents to retrieve.
• limitDefine the number of documents displayed per page, which directly affects the pagination size.
• orderControl the sorting method of documents, such as in reverse order by publication time (id desc) or in reverse order by views (views desc)

WhenarchiveListStart withtype="page"When the pattern runs, it will store the processed document data in a variable we specify (for examplearchives), and will also prepare the pagination metadata ready forpaginationTag calling.

pagination: Intelligent generation of pagination navigation

Immediately thereafter,paginationThe label makes its appearance. Its task is toarchiveListThe provided pagination metadata, intelligently generates home page, previous page, next page, last page, and a series of page number navigation links.The introduction of this tag greatly simplifies the complexity of building pagination logic for front-end developers.

paginationThe label usually receives a namedshowparameter to control the number of pages displayed in the navigation bar. For example,show="5"It means that a total of 5 page number links will be displayed before and after the current page to keep the navigation concise.

paginationThe tag will provide a variable (for example,pages), this variable contains all the information needed to build the pagination navigation:

• pages.TotalItems: Total number of documents.
• pages.TotalPages: Total number of pages.
• pages.CurrentPage: Current page number.
• pages.FirstPage/pages.LastPage/pages.PrevPage/pages.NextPage: Representing the links and names of the first page, last page, previous page, and next page.
• pages.PagesThis is an array containing all visible page number information, each element of which hasName(page number),Link(Page link) andIsCurrent(whether it is the current page) and other attributes for easy loop rendering.

Actual operation: Strong cooperation to achieve pagination

Now, let's look at a specific code example to seearchiveListandpaginationHow it works together in the AnQiCMS template. Suppose we want to display a list of articles on a category page or a model home page and add pagination.

{# 首先，使用archiveList标签获取文档列表，注意设置type="page"以启用分页 #}
<div>
{% archiveList archives with type="page" limit="10" moduleId="1" categoryId="1" order="id desc" %}
    {# 遍历文档列表，并显示每篇文档的简要信息 #}
    {% for item in archives %}
    <article class="document-item">
        <a href="{{item.Link}}">
            <h2>{{item.Title}}</h2>
            <p>{{item.Description}}</p>
            <div class="meta-info">
                <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量：{{item.Views}}</span>
            </div>
            {% if item.Thumb %}
            <figure class="document-thumb">
                <img alt="{{item.Title}}" src="{{item.Thumb}}">
            </figure>
            {% endif %}
        </a>
    </article>
    {% empty %}
    {# 当没有文档时显示的内容 #}
    <p class="no-content-tip">当前分类下暂无文档。</p>
    {% endfor %}
{% endarchiveList %}

    {# 接下来，使用pagination标签生成分页导航。它会自动使用archiveList提供的数据 #}
    <nav class="pagination-navigation">
        {% 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>
            <div class="pagination-info">
                <span>总计：{{pages.TotalItems}}条</span>
                <span>当前第：{{pages.CurrentPage}}/{{pages.TotalPages}}页</span>
            </div>
        {% endpagination %}
    </nav>
</div>

In the above code, we first obtained the article list througharchiveListtags and specifiedtype="page"and displayed per page10articles. Then, we used aforLoop througharchivesA variable that displays the title, summary, category, publish date, and reading volume of each article. If the list is empty,{% empty %}the prompt information in the block will be displayed.

Immediately thereafter,paginationthe tag receivedarchiveListProcessed pagination data, and using its internalpagesvariable to build the complete pagination navigation. We usepages.FirstPage/pages.PrevPage/pages.NextPage/pages.LastPageto create special page number links, and through{% for item in pages.Pages %}Loop dynamically generate the middle page number. In which,item.IsCurrentBoolean values can help us easily add the current page number.activeHighlight the class visually. Finally, we also displayed the total number of items and the current page/total pages information, further enriching the user experience.

Flexible customization and optimization: take it further

ThisarchiveListCombinepaginationPagination method, not only provides basic functions, but also leaves sufficient customization space.

In terms of style, we can customize according to the design language of our website, to.document-item/.pagination-navigation/.page-itemas well as.activeWait for CSS classes to write unique styles to create pagination components consistent with the overall style of the website.Due to the support of AnQiCMS template for Django template engine syntax, this means that we can make use of its powerful conditional judgment, loop control, and other functions to perform more complex logic processing on pagination navigation, such as simplifying pagination display on mobile devices or hiding certain pagination links in specific situations.

In terms of SEO, AnQiCMS built-in pseudo-static features ensure that the URL structure of pagination links is friendly and can be indexed by search engines, which is crucial for improving the overall SEO performance of the website.By implementing this standardized pagination, search engines can better understand and index the deep content of websites, avoiding duplicate content or indexing issues caused by pagination.

Summary: Make content management more efficient

ByarchiveListandpaginationThese tags work closely together, AnQiCMS provides us with a powerful and flexible document list pagination solution.It clearly separates complex backend data processing from the frontend page rendering logic, making content management and website frontend development more efficient and convenient.Whether it is to build a corporate website, content portal, or blog system, mastering this combination will help us better operate the website and provide users with