How can I make the AnQiCMS pagination tags display more friendly on mobile devices while designing a responsive website?

Certainly, as an experienced website operations expert, I am happy to delve into how AnQiCMS optimizes pagination tags in responsive design to provide a more user-friendly mobile experience.

Responsive pagination optimization for AnQiCMS: Making mobile browsing smoother

In today's mobile internet age, the mobile experience of websites is crucial.Users are accustomed to quick swiping and tapping on mobile phones. If a website looks clumsy and difficult to operate on a mobile device, it will undoubtedly greatly affect the user experience and even lead to user loss.Pagination is an important component of content display, and its friendliness on mobile devices is often neglected, but it is directly related to whether users can smoothly browse more content.AnQiCMS as an efficient and flexible content management system provides a solid foundation for us to optimize pagination.

AnQiCMS uses a syntax similar to the Django template engine, which gives templates high flexibility and customizability.In responsive design, this means we can precisely control the pagination label's performance on different devices.

Deep understanding of AnQiCMS pagination mechanism

The pagination feature in AnQiCMS is usually implemented through{% pagination pages with show="5" %}Call this tag here. This is thepagesThe object carries all the data related to pagination, including the total number of items(TotalItems）、total number of pages（TotalPages）、current page（CurrentPage）、first page（FirstPage) and the last page (LastPage）、previous page（PrevPage），next page（NextPage) and an array containing the middle page numbers(Pages). Each specific page number item(item) also includes the name(Name), link (Link), and whether it is the current pageIsCurrent）等信息。

AnQiCMS provides a complete pagination data structure, as for how these data are presented on the front end, it entirely depends on the HTML structure and CSS style of our templates.This is the breakthrough point for our mobile optimization.

Core strategies for mobile pagination optimization

To make the pagination tags of AnQiCMS display more friendly on mobile devices, we usually focus on the following core strategies:

1. Simplified pagination display, less is more

The screen space of mobile devices is limited, and a long list of page numbers can look cluttered on a small screen. Therefore, the primary task is to simplify the display.

We can modify throughshowparameters to control how many page numbers are displayed. For example, setshow="5"toshow="3"So on the PC side, it can display 5 page numbers, and on the mobile side, it can further use CSS media queries to hide less important page numbers, only retaining the core navigation elements.

For mobile devices, the ideal pagination display may only include 'Previous page', 'Next page', 'Current page', supplemented by 'First page' and 'Last page'.Those page numbers located on both sides of the current page but far away, can be selectively hidden on small screens to reduce visual burden.

{# 基础分页代码，在此基础上进行CSS和JS优化 #}
<div class="pagination">
    {% 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 page-number {% 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 the code above, we added a class to the middle page number's<li>elementpage-numberso that we can target it specifically for CSS styling adjustments.

2. Use CSS media queries to implement responsive layout

CSS media queries are the foundation of responsive design.We can use it to detect the screen width and apply different styles for different device sizes.

For pagination, we can hide some numeric page numbers under the width of mobile devices, only displaying the current page number and key navigation such as 'Previous page', 'Next page', etc.At the same time, in order to adapt to touch operations, it is appropriate to enlarge the click area of pagination links, increase font size and button spacing.

/* 默认PC端样式 */
.pagination ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.pagination li {
    margin: 0 5px;
}
.pagination a {
    display: block;
    padding: 8px 12px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
    transition: background-color 0.3s;
}
.pagination a:hover,
.pagination li.active a {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .pagination ul {
        flex-wrap: wrap; /* 允许项目换行 */
        font-size: 14px; /* 增大字体 */
    }
    .pagination li {
        margin: 5px 3px; /* 调整间距 */
    }
    .pagination a {
        padding: 10px 15px; /* 增大点击区域 */
        min-width: 40px; /* 确保最小宽度 */
        text-align: center;
    }

    /* 隐藏除当前页、上一页、下一页、首页、末页之外的数字页码 */
    .pagination li.page-number {
        display: none;
    }
    .pagination li.page-number.active, /* 确保当前页总是显示 */
    .pagination li:first-child, /* 首页 */
    .pagination li:nth-last-child(2), /* 倒数第二个，通常是下一页或末页 */
    .pagination li:nth-child(2) /* 第二个，通常是上一页或首页 */
    {
        display: block;
    }
    /* 针对只有前后页的情况进行调整 */
    .pagination li:first-child:nth-last-child(3),
    .pagination li:first-child:nth-last-child(3) ~ li:nth-last-child(2),
    .pagination li:first-child:nth-last-child(3) ~ li:nth-last-child(1) {
        display: block;
    }
}

/* 针对更小的屏幕，可能只显示上一页/下一页 */
@media (max-width: 480px) {
    .pagination li.page-number {
        display: none !important; /* 强制隐藏所有数字页码 */
    }
    .pagination li:first-child,
    .pagination li:last-child {
        display: none !important; /* 隐藏首页和末页 */
    }
    /* 仅显示上一页和下一页 */
    .pagination li:nth-child(2), /* 上一页 */
    .pagination li:nth-last-child(2) /* 下一页 */
    {
        display: block !important;
        flex-grow: 1; /* 让它们占据可用空间 */
    }
}

Please note that the example of the CSS media query provided above offers an idea for hiding page numbers, and in actual projects, it may be necessary to have more refined media query breakpoints and more complex selectors to ensure correct display in all cases.

3. Consider the independence of templates under the "PC+mobile" mode

AnQiCMS isdesign-convention.mdMentioned, its template supports adaptive, code adaptation, and PC+mobile independent site mode. If your website uses the "code adaptation" or "PC+mobile" mode, then you can create a separate one for the mobile endmobileDirectory, and place a dedicated mobile pagination template in it.

For example, inmobile/archive/list.htmlormobile/tag/list.htmlIn the mobile list template, directly use the simplified pagination HTML structure and the operation logic more suitable for mobile devices, which can avoid sharing complex CSS media queries between PC and mobile endpoints.This approach is very effective when a significant differentiation is needed between PC and mobile experience.

4. Improve touch-friendliness.

Ensure that the touch area of pagination links is sufficiently large, which is crucial for enhancing the mobile user experience. According to Google's Material Design or Apple's Human Interface Guidelines, the recommended minimum touch target size is