In a content management system, especially when the website carries a large number of articles, products, or other list information, reasonable pagination navigation is the key to improving user experience and facilitating content browsing.It not only helps visitors quickly find the required information, but also avoids the slow loading caused by the overlong single page content, which is also very beneficial for search engine optimization (SEO).AnqiCMS provides a powerful and flexible template tag set, allowing you to easily implement pagination functions on the website and customize their display methods and styles as needed.
Enable pagination feature: Start from the list tag
In AnqiCMS, to enable the pagination feature for your content list, you first need to specify the pagination type in the tag for retrieving the content list. For example, when usingarchiveList(Document List),tagDataList(Tag document list) orcommentListwhen the tags (comment list) are, you need totypeparameter settings"page"This means you are telling the system that this list needs to be displayed by pages, not all at once.limitThe parameter is used to define how many items are displayed per page, which will directly affect the calculation of the total number of pages.
For example, if you want to display 10 articles per page in a list of articles and enable pagination,archiveListthe tags may be set like this:
{% archiveList archives with type="page" limit="10" %}
{# 循环显示文章列表内容 #}
{% for item in archives %}
<a href="{{item.Link}}">{{item.Title}}</a>
{# ... 其他文章信息 ... #}
{% endfor %}
{% endarchiveList %}
Oncetype="page"set, AnqiCMS will automatically provide in the context of the current pagepagesThis object contains all the data required for pagination, and our subsequent pagination navigation will be centered around it.
Understanding pagination data:pagesThe mysteries of variables
When your list tag has the pagination feature enabled, you can throughpaginationThis tag is used to render pagination navigation. It will process the pagination data generated by the previous list tag and encapsulate it in apagesvariable for you to use in the template.
ThispagesThe variable is not a simple list of page numbers, it is an object containing rich information that allows you to build a fully functional pagination navigation. It includes several core properties, mastering them will enable you to control the pagination display as you wish:
TotalItems：represents the total number of items, allowing you to know how many articles or products are on the website.TotalPages：displays the total number of pages of content, convenient for users to understand the overall scale of the content.CurrentPage：Indicates the current page being viewed by the user, which is a key to determining the active state.FirstPage：Contains the link to the homepage (Link) and the name (NameThe object at the end, usually used for the "Home" button.LastPage: withFirstPageSimilar, it includes the link and name of the last page.PrevPage: It includes the link and name of the previous page, available when the current page is not the first page.NextPageContains the link and name of the next page, available when the current page is not the last page.PagesThis is an array object that contains page number information of the middle part. It is usually used forforLoop, display clickable page numbers individually. Each page number item (item) also containsName(page number),Link(page link),IsCurrent(whether it is the current page) and other properties.
With this information, you can flexibly organize the various parts of pagination navigation in the template.
Customize the display of page number quantity and style
AnqiCMS pagination tagpaginationThe most commonly used parameter isshowwhich allows you to customize how many page numbers are displayed in the middle area. For example,show="5"It will make pagination navigation display only 5 page links near the current page, and the rest will be omitted with ellipses or hidden directly.This is particularly useful for lists with a large number of page numbers, as it can avoid page clutter caused by long pagination bars.
We usually use when building pagination navigation.<ul><li><a>Such HTML structure, and beautify them with CSS. Here is a common pagination navigation template code example, which combinesshowparameters,pagesVariables' various properties, and utilizeIsCurrentProperties to add special styles to the current page, making it easy for users to see at a glance:
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul class="pagination-list">
{# 显示总条目数和页码信息，帮助用户了解概况 #}
<li class="pagination-info">共 {{pages.TotalItems}} 条内容，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</li>
{# “首页”按钮，当当前页是首页时，可以给它添加不同的样式 #}
<li class="pagination-item {% if pages.FirstPage.IsCurrent %}is-active{% endif %}">
<a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
</li>
{# “上一页”按钮，只有当存在上一页时才显示 #}
{% if pages.PrevPage %}
<li class="pagination-item">
<a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
</li>
{% endif %}
{# 循环显示中间部分的页码，这里会根据 show 参数来限制数量 #}
{% for item in pages.Pages %}
<li class="pagination-item {% if item.IsCurrent %}is-active{% endif %}">
<a href="{{item.Link}}">{{item.Name}}</a>
</li>
{% endfor %}
{# “下一页”按钮，只有当存在下一页时才显示 #}
{% if pages.NextPage %}
<li class="pagination-item">
<a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
</li>
{% endif %}
{# “末页”按钮，当当前页是末页时，可以给它添加不同的样式 #}
<li class="pagination-item {% if pages.LastPage.IsCurrent %}is-active{% endif %}">
<a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
</ul>
{% endpagination %}
</div>
Through this code, you can create a page with "HomeshowThe pagination navigation for dynamically adjusting the number of values. is-activeThe class name can be used to highlight the current page number, for example, by setting the background color or making the font bold through CSS, thus providing more intuitive visual feedback.
For the display style of page numbers, you can control it by customizing CSS filespagination-container/pagination-list/pagination-itemandis-activeThe appearance of class names. For example:
.pagination-list {
display: flex;
list-style: none;
padding: 0;
margin: 20px 0;
justify-content: center;
}
.pagination-item {
margin: 0 5px;
}
.pagination-item a {
display: block;
padding: 8px 12px;
border: 1px solid #ccc;
color: #333;
text-decoration: none;
border-radius: 4px;
}
.pagination-item a:hover {
background-color: #f0f0f0;
}
.pagination-item.is-active a {
background-color: #007bff;
color: white;
border-color: #007bff;
}
.pagination-info {
padding: 8px 12px;
color: #666;
}
This CSS is just a basic example, you can adjust it according to the overall style of the website to create a unique pagination navigation.
Summary
In AnqiCMS, implementing pagination navigation essentially combines content list tags,type="page"properties, as well aspaginationtag pairspagesflexible use of object properties. By understandingpagesThe various data provided by the object, and make good use of itshowThe parameter is used to control the number of pages, and in conjunction with custom HTML structure and CSS styles, you can provide a website with a beautiful and practical pagination navigation system, greatly enhancing the user's browsing experience.
Common Questions (FAQ)
1. My pagination does not display or the link is incorrect after clicking, what went wrong?
First, make sure you are getting the tags for the content list (such asarchiveList/tagDataListauto. If the correct setting is made in “等）中type="page"auto. If this parameter is missing, the system will not generate pagination data. Next, check whether you have placed the list tag before thepaginationauto. AndpaginationLabel variable name used (for example)pages）The variables generated by the list label are matched automatically.Finally, check if your website's URL rewriting rules are configured correctly. Incorrect URL rewriting rules can cause pagination links to not be parsed normally.
2. How can the current page number be made more prominent visually, for easy user recognition?
In the above example, we made use ofpages.PagesEach page item in the array has its ownIsCurrentproperty. When a page number is the current page,IsCurrenthas a value oftrue. You can make a conditional judgment on the corresponding<li>or<a>tag (for example,{% if item.IsCurrent %}is-active{% endif %}Add a CSS class dynamically, then write style rules for this class (such as setting background color, font color, border, etc.) to make it stand out among many page numbers.
3. If my website has a large number of pages (such as hundreds of pages), I hope to better control the display quantity of middle page numbers. What should I do?
You can usepaginationTagsshowParameters to accurately control the number of intermediate page numbers. For example, if you want to display 2 page numbers before and after the current page (a total of 5 page numbers, including the current page), you can set the parameter toshow="5".The system will intelligently display the page numbers near the current page and will automatically insert ellipses when necessary (if you implement similar logic in your template or if the system provides it by default).This can avoid taking up too much page space when there are too many page numbers.