As a senior website operation expert, I know the importance of pagination navigation for improving user experience and optimizing the website structure.In such an efficient and flexible content management system as AnQiCMS, ensuring that pagination navigation is not only functionally complete but also visually aligned and elegantly laid out is an indispensable part of content operation.Today, let's delve into how to achieve this goal in AnQiCMS.

Overview of AnQiCMS Pagination Mechanism

In AnQiCMS, the core of pagination navigation is its powerful template tag system. When dealing with content that requires pagination display, such as article lists and product lists,{% archiveList %}This list label comes in handy. To enable pagination, we usually set parameters and specify how many items to display per page.type="page"The parameters, and specify how many items to display per page.limitFor example, the number of items.{% archiveList archives with type="page" limit="10" %}.

Once the list data is correctly fetched and marked as a pagination type, the next step is to use{% pagination %}The template tag is used to generate the HTML structure and links for pagination navigation.The responsibility of this label is to provide data and generate links, while how these links are presented on the page is entirely decided by the front-end HTML structure and CSS style.pagesan object that contains rich pagination information, such as total number of recordsTotalItemsand total number of pagesTotalPagesand current pageCurrentPage, and most importantly, used to build pagination links,FirstPage(Home page),PrevPage(Previous page),Pages(Middle page number array),NextPage(Next page) andLastPage(End page).

Core: The use of pagination tags in the template.

To implement pagination navigation layout, we first need to embed it into an appropriate template file. This usually happens on the document list page (for examplearchive/list.htmlor a custom one{模型table}/list-{分类ID}.html).

The following is a typical example of AnQiCMS pagination tag usage, it shows how to iteratepagesobjects and build pagination links:

<div class="pagination-container">
    {% pagination pages with show="5" %}
    <ul class="pagination-list">
        {# 首页链接 #}
        <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>

In this structure,show="5"The parameter tells AnQiCMS to display a maximum of 5 page number buttons in the middle. We have added a class to each page number link and have added one for the current page.page-itemclass, and one for the current page.activeClass, which provides a rich choice for subsequent CSS beautification. Notice thatPrevPageandNextPage是有条件的显示，AnQiCMS只会生成可点击的链接，而不会显示不可用的“禁用”状态按钮，这让我们的HTML结构更加简洁。

The key CSS strategy for bottom alignment

To ensure that the pagination navigation always stays at the bottom of the page, it is necessary to start from the macro level of the entire page layout.An English translation of "auto

假设你的页面有一个主内容区和一个页脚区，并且你希望分页导航出现在页脚区或者紧贴内容区的底部：

  1. Set Flexbox layout for the root container of the pageis usuallybodyan element or a top-levelmain-wrapper.

    body, #main-wrapper {
    display: flex;
    flex-direction: column; /* 让子元素垂直堆叠 */
    min-height: 100vh; /* 确保容器至少与视口一样高 */
}

  2. Let the main content area occupy the remaining spaceSuch that, when the content is not enough to fill the entire viewport, the pagination navigation (or footer) is 'pushed' to the bottom.

    .main-content { /* 包含列表和分页导航的父容器 */
    flex-grow: 1; /* 占据所有可用空间 */
}

  3. Locate pagination navigationOnce the pagination navigation is pushed to the bottom area, we can align it precisely. The most common is center alignment.

    .pagination-container {
    margin-top: 30px; /* 与上方内容保持间距 */
    padding: 20px 0; /* 内部填充 */
    text-align: center; /* 居中对齐内部的inline-block元素，如 ul */
    /* 或者如果 ul 也是 flex 容器，可以使用 justify-content: center; */
}

Pagination Layout and Aesthetics Techniques

Once the pagination navigation is positioned at the bottom of the page, the next step is to optimize its internal layout and visual appeal.

  1. Horizontally aligned page numbers: By default,liThe element is a block-level element that stacks vertically. We need to make them horizontally aligned.

    `css