As an experienced website operation expert, I am well aware of the importance of pagination navigation in improving user experience and optimizing website structure.In a high-efficiency and flexible content management system like AnQiCMS, ensuring that pagination navigation is not only functionally complete but also visually aligned and elegantly laid out is an indispensable part of content operations.Today, let's delve into how to achieve this goal in AnQiCMS.

AnQiCMS Pagination Mechanism Overview

In AnQiCMS, the core of pagination navigation is its powerful template tag system. When we deal with content such as article lists, product lists, and others that need to be displayed with pagination, {% archiveList %}Such list labels come in handy. To enable pagination, we usually set parameters for the list labels and specify how many items to display per page.type="page"parameters and specify how many items to display per page.limitfor example.{% archiveList archives with type="page" limit="10" %}.

Once the list data is correctly retrieved and marked as a pagination type, the next step is to use{% pagination %}Template tags are used to generate the HTML structure and links for pagination navigation.This tag is responsible for providing data and generating links, and how these links are presented on the page is completely left up to the HTML structure and CSS style of the front-end.AnQiCMS pagination tag returns apagesan object that contains rich pagination information, such as the total number of itemsTotalItems, the total number of pagesTotalPages, and the current pageCurrentPageand, most importantly, used to build pagination links.FirstPage(Home page),PrevPage(Previous page),Pages(Page number array in the middle),NextPage(Next page) andLastPage(End page).

Core: The use of pagination tags in the template.

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

This is an example of a typical AnQiCMS pagination tag usage, which shows how to iteratepagesan object 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 added links to each page number.page-itemAdd class to the current pageactiveClass, this provides a rich choice for subsequent CSS beautification. NoticingPrevPageandNextPageIt is conditionally displayed, AnQiCMS will only generate clickable links and will not display the "disabled" status button, making our HTML structure more concise.

Implement the key CSS strategy for bottom alignment

To keep the pagination navigation always at the bottom of the page, it is first necessary to start from the macro level of the entire page layout.A common, modern CSS layout technique is to use Flexbox or Grid to control the overall structure of the page.

Assuming your page has a main content area and a footer area, and you want the pagination navigation to appear in the footer or right below the content area:

  1. Set Flexbox layout for the root container of the page: It is usuallybodyAn element or a top-levelmain-wrapperelements.

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

  2. Let the main content area occupy the remaining space: In this way, when the content is not enough to fill the entire viewport, the pagination navigation (or footer) will be '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 beautification skills

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

  1. Horizontally arranged page numbers: By default,liThe element is a block-level element, it stacks vertically. We need to make them horizontal.

    `css