As an experienced website operation expert, I am more than happy to delve into how AnQiCMS optimizes pagination tags in responsive design to provide a more user-friendly mobile experience.
AnQiCMS Responsive Pagination Optimization: Make Mobile Browsing More Smooth
AnQiCMS uses a syntax similar to Django template engine, which endows templates with high flexibility and customizability.In responsive design, this means we can accurately control the pagination tab's performance on different devices.
Deep Understanding of AnQiCMS Pagination Mechanism
In AnQiCMS, the pagination feature is usually implemented by{% pagination pages with show="5" %}This label is used to call. Here is thepagesobject carries all the data related to pagination, including the total number of records (TotalItems), total number of pages (TotalPages), current page number (CurrentPage), and the first page (FirstPage), the last page (LastPage）、Previous Page（PrevPage）、Next Page（NextPage), and an array containing the middle page numbers (Pages）。Every specific page item (item）also includes the name (Name), link (Link）and whether it is the current page (IsCurrent）等信息。
The core strategy for mobile pagination optimization
To make the pagination tags of AnQiCMS more user-friendly on mobile devices, we usually focus on the following core strategies:
1. Simplify pagination display, less is more
The screen space on mobile devices is limited, and a long list of page numbers can appear crowded on small screens. Therefore, the primary task is to simplify the display.
We can modifyshowThe parameter is used to control how many page numbers are displayed. For example, setshow="5"to adjustshow="3"English translation: Such that 5 page numbers can be displayed on the PC end, and on the mobile end, CSS media queries can be further utilized to hide less important page numbers, only retaining the core navigation elements.
For mobile devices, the ideal pagination display may only include "Previous pageThose page numbers located on the sides of the current page but further 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 above code, we added a class for the<li>element.page-numberclass, so that we can target it specifically in CSS adjustments.
2. Using CSS media queries to implement responsive layout
CSS media queries (Media Queries) are the cornerstone of responsive design.We can use it to detect the screen width and apply different styles for different device sizes.
/* 默认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 CSS media query example provided above offers an idea for hiding page numbers. In actual projects, it may be necessary to use more refined media query breakpoints and more complex selectors to ensure correct display in all cases.
3. Consider the template independence under the "PC+phone" mode
AnQiCMS indesign-convention.mdEnglish version: mentioned, 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 end.mobileThe catalog, and place a special mobile pagination template in it.
For example, inmobile/archive/list.htmlormobile/tag/list.html
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, it is recommended that the minimum touch target size be