As an experienced website operations expert, I fully understand the core status of the Content Management System (CMS) in website construction and daily operations.Especially for basic functions like pagination, their flexibility is often directly related to user experience, search engine optimization (SEO), and the aesthetics of front-end design.Many developers and operators are concerned, how much freedom does a system like AnQiCMS, which pursues efficiency and customization, provide in the HTML output structure of pagination tags?Can the page number be fully customized?<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, and you can fully control the pagination<a>The content around the tag and the HTML. This is due to the Django template engine adopted by Anqi CMS, which closely separates data logic from front-end display, giving template developers great freedom.

The working principle of the Anqi CMS pagination tag

First, 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 will use{% pagination pages with show="5" %}Such a label. Here ispagesIt is an object that contains all pagination information, whileshow="5"it indicates that up to 5 page number links can be displayed in the middle.

ThispagesAn object is not just a simple list of page numbers, it is a richly structured object that includes such items as total number ofTotalItems）、total number of pages（TotalPages）、current page（CurrentPage）、first page（FirstPage）、last page（LastPage）、previous page（PrevPage），next page（NextPage）with comprehensive pagination status. The most critical thing is that it provides aPagesarray, which contains each intermediate page number（pageItem）with detailed information.

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>Label content

It is this rich and structured data that enables the pagination HTML output structure of Anqi CMS to have extremely high customizability.The system itself does not force output a fixed HTML skeleton, but delivers these pagination data to your template, allowing you to present the most suitable HTML that meets the design and business needs.

This means you can iterate through it like this in the templatepages.Pagesarray and based onpageItemofNameandLinkProperties, manually build each page link<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">&laquo;</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">&lsaquo;</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">&rsaquo;</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">&raquo;</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:

  1. 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 front-end framework (like Bootstrap).
  2. <a>The label content is highly free: <a>The content inside the label, you can display directly{{item.Name}}(Page number), it can also be added with text, icons, or even more complex structures. For example, displaying 'Previous page' as a left arrow icon, or displaying the page number1displayed asGo to Page 1.aria-labelAccessibility properties can also be easily added, further enhancing the user experience.
  3. Dynamic style control: IsCurrentProperties allow you to easily add special styles to the current page number, such as highlighting, to enhance the user's perception of the current position.
  4. The URL structure is adjustable:Although this is not directly about HTML output, it is worth mentioning that,paginationtags also support an advanced parameter,prefixallowing you to customize the page number URL generation pattern (for example,?page={page}or/p/{page}.htmlThis further expands the SEO optimization space, making the link structure more semantic.

This design philosophy of Anqi CMS is consistent with its positioning of '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 presentation.This is undoubtedly a huge advantage for enterprises and operators pursuing personalized design, focusing on user experience, and needing in-depth SEO optimization.

Summary

The pagination tag of AnQi CMS is not a fixed HTML output structure, but it provides detailedpagination data objectAllow template developers to leverage the powerful capabilities of the Django template engine to fully customize page numbers,<a>Tag content and its outer wrapping HTML structure. This flexible design ensures that the website maintains backend management efficiency while presenting endless possibilities on the front-end, whether it's implementing responsive design, adapting various front-end frameworks, or optimizing for specific SEO needs, it does so effortlessly.

Frequently Asked Questions (FAQ)

1. Can I use icons instead of numbers in page link numbers??

Of course you can. As described in the article, AnQi CMS providesitem.Nameto represent the page number display content, you can fully customize it in the template using<i>Tag to introduce icon font (such as Font Awesome) or<img>Tag to insert an image to replace{{item.Name}}So as to realize the use of icons to display pagination links, for example, displaying “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, as Anqie CMS allows you to fully customize the HTML output structure of pagination, it can easily integrate 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 (such as Bootstrap'spagination/page-item/page-linkEnabling pagination styles to seamlessly adapt to your website's frontend framework. This flexibility allows frontend developers to focus on design without worrying about CMS restrictions.

3. If I want to change the pagination URL structure (such as from?page=2to/page/2.html), can this also be customized?

Yes, in addition to the HTML output structure, you can also throughpaginationlabel'sprefixParameters for advanced URL structure customization. For example, you can setprefix="/page/{page}.html"to generate/page/1.html,/page/2.htmlSuch a URL. It is very helpful for implementing a more friendly pseudo-static URL to enhance the SEO performance of the website, but it is worth noting that the modification of this URL mode usually also needs to be synchronized with the pseudo-static rule configuration of the AnQi CMS backend.