As an experienced website operations expert, I fully understand the core position of the content management system (CMS) in website construction and daily operation.Especially for basic features like pagination, its flexibility often directly relates to user experience, search engine optimization (SEO), and the aesthetic beauty of front-end design.Many developers and operators are concerned about the degree of freedom provided in the HTML output structure of pagination tags for systems that pursue efficiency and customizability, such as AnQiCMS.<a>What about the tag content?
The answer is affirmative, Anqi CMS provides high flexibility and customization space in the HTML output structure of pagination tags, allowing you to fully control the page numbers<a>The label and the surrounding HTML content.This is due to the Django template engine syntax adopted by Anqi CMS, which tightly separates data logic from front-end display, giving template developers great freedom.
The working principle of Anqi CMS pagination tag
Firstly, let's understand the Anqi CMS pagination tagpaginationHow it works. When you need to implement pagination on a list page (whether it's an article list, product list, or tag document list), you would use{% pagination pages with show="5" %}such tags. Here is thepagesis an object that contains all pagination information, whileshow="5"indicates that up to 5 page number links can be displayed in the middle.
ThispagesThe object is not just a simple list of page numbers, it is a richly structured object that contains, such as total number of items (TotalItems), total number of pages (TotalPages), current page number (CurrentPage), and the first page (FirstPage）、End Page（LastPage）、Previous Page（PrevPage）、Next Page（NextPage）and comprehensive pagination status. The most crucial is that it provides aPagesarray, which stores each intermediate page number（pageItemThe details of ）.
Every onepageItemAll have three core properties：“Name(The display name of the page number, such as “1”, “2”, or “Previous page”)，Link(The corresponding page number URL) andIsCurrent(A boolean value indicating whether the page is the current page).
Flexible custom page numbering<a>Tag content
It is these rich and structured data that enable the pagination HTML output structure of Anqi CMS to have extremely high customizability.The system itself does not force a fixed HTML skeleton to be output, but rather 'hands over' these pagination data to your template, allowing you to present the most suitable HTML for design and business requirements.
This means that you can iterate over the template as follows,pages.Pagesarray and based onpageItemofNameandLinkProperties, manually build each page link's<a>Tags:
<div class="pagination">
<ul class="d-flex justify-content-center my-4">
{# 首页链接，可以自定义它的文字、图标或样式 #}
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{pages.FirstPage.Link}}" aria-label="首页">
<span aria-hidden="true">«</span>
<span class="sr-only">首页</span>
</a>
</li>
{# 上一页链接 #}
{% if pages.PrevPage %}
<li class="page-item">
<a class="page-link" href="{{pages.PrevPage.Link}}" aria-label="上一页">
<span aria-hidden="true">‹</span>
<span class="sr-only">上一页</span>
</a>
</li>
{% endif %}
{# 中间页码链接，这是最能体现自定义之处 #}
{% for item in pages.Pages %}
<li class="page-item {% if item.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{item.Link}}">{{item.Name}}</a>
</li>
{% endfor %}
{# 下一页链接 #}
{% if pages.NextPage %}
<li class="page-item">
<a class="page-link" href="{{pages.NextPage.Link}}" aria-label="下一页">
<span aria-hidden="true">›</span>
<span class="sr-only">下一页</span>
</a>
</li>
{% endif %}
{# 尾页链接 #}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{pages.LastPage.Link}}" aria-label="尾页">
<span aria-hidden="true">»</span>
<span class="sr-only">尾页</span>
</a>
</li>
</ul>
<div class="pagination-info text-center text-muted">
总共 {{pages.TotalItems}} 条数据，分为 {{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页。
</div>
</div>
From the above code example, we can clearly see:
- HTML structure is completely customizable:You can freely choose to use
<ul><li>/<div><span>or any other HTML tag to wrap page link, even you can add custom CSS class names (likepage-item/page-link/active) to work with your frontend framework (like Bootstrap). <a>Tag content is highly flexible:<a>You can directly display the content inside the tag{{item.Name}}the page number), and can also add text, icons, or even more complex structures according to requirements. For example, displaying 'Previous Page' as a left arrow icon, or the page number1displayed asGo to Page 1.aria-labelAccessibility features can also be easily added, further enhancing the user experience.- Dynamic style control:
IsCurrentThe property allows you to easily add special styles to the current page number, such as highlighting, to enhance the user's perception of the current position. - The URL structure is adjustable:Although this is not directly about HTML output, it is worth mentioning,
paginationthe tag also supports an advanced parameter,prefixwhich allows you to customize the pattern of generating page number URLs (for example,?page={page}or/p/{page}.htmlThis further expands the space for SEO optimization, making the link structure more semantic.
This design philosophy of Anqi CMS is consistent with its positioning of being 'efficient, customizable, and easy to expand.'It deeply understands that the design and business logic of each website are unique, therefore, while providing strong support for core functions, it maximizes the freedom of front-end display.This is undoubtedly a huge advantage for enterprises and operators pursuing personalized design, focusing on user experience, and in need of deep SEO optimization.
Summary
The pagination tags of Anqi CMS are not a fixed HTML output structure, but are provided by detailedpagination data objectsEnabling template developers to utilize the powerful capabilities of the Django template engine to completely customize page numbers,<a>The content of the tag and its surrounding HTML structure.This flexible design ensures that the website maintains backend management efficiency while offering limitless possibilities on the frontend. Whether it's implementing responsive design, adapting to various frontend frameworks, or optimizing for specific SEO needs, it handles it with ease.
Common Questions (FAQ)
1. Can I use icons instead of numbers in page number links?
Of course, as described in the article, AnQi CMS providesitem.Nameto represent the page number display content, you can completely customize it in the template according to your needs,<i>Label import icon font (such as Font Awesome) or<img>Insert an image tag to replace{{item.Name}}To achieve displaying pagination links with icons, for example, show “Home” asfa-homeIcon, or replace the page number with a custom image background.
2. Is the pagination style of Anqi CMS compatible with Bootstrap or other front-end frameworks?
Yes, since AanQi CMS allows you to fully customize the HTML output structure of pagination, it can very easily be integrated with Bootstrap, Tailwind CSS, or any other frontend framework. You just need to add the class names required by the corresponding framework in the pagination code (for example, Bootstrap'spagination/page-item/page-link[en] This flexibility allows front-end developers to focus on design without worrying about CMS restrictions.
3. If I want to change the structure of the pagination URL (such as from?page=2to/page/2.html), can this also be customized?
Yes, in addition to the HTML output structure, you can also throughpaginationTagsprefixParameter for advanced URL structure customization. For example, you can setprefix="/page/{page}.html"to generate/page/1.html,/page/2.htmlSuch a URL.This is very helpful for achieving more friendly pseudo-static URLs and further improving the website's SEO performance, but it is necessary to note that the modification of this URL pattern usually also requires synchronization with the pseudo-static rule configuration of the security CMS backend.