How to implement pagination navigation in AnqiCMS templates and customize the display of page numbers and style?

In a content management system, especially when a website carries a large amount of articles, products, or other list information, reasonable pagination navigation is the key to improving user experience and facilitating content browsing.It can not only help visitors find the information they need quickly, but also avoid the slow loading caused by the long content of a single page, and it is also very beneficial for search engine optimization (SEO).AnqiCMS provides a powerful and flexible template tag system, allowing you to easily implement pagination on your website and customize its display style and formatting as needed.

Enable pagination feature: start from list tag

In AnqiCMS, to enable pagination for your content list, you first need to specify the pagination type in the tag of retrieving the content list. For example, when you are usingarchiveList(Document list),tagDataList(Tag document list) orcommentList(Comment list) and tags need to be translated totypethe parameter to"page"This means you are telling the system that this list needs to be displayed by pages, rather than listed all at once. At the same time,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 an article list and enable pagination, yourarchiveListtags might be set up like this:

{% archiveList archives with type="page" limit="10" %}
    {# 循环显示文章列表内容 #}
    {% for item in archives %}
        <a href="{{item.Link}}">{{item.Title}}</a>
        {# ... 其他文章信息 ... #}
    {% endfor %}
{% endarchiveList %}

Oncetype="page"Be set, AnqiCMS will automatically provide one in the context of the current pagepagesAn object, this object contains all the data required for pagination, and our subsequent pagination navigation will be based around it.

Understanding pagination data:pagesThe mystery of variables

After your list tag has enabled pagination, you can go throughpaginationA tag to render pagination navigation. This tag will handle the pagination data generated by the previous list tag and encapsulate it in apagesvariable for use in the template.

ThispagesThe variable is not a simple list of page numbers; it is an object that contains rich information, allowing you to build a fully functional pagination navigation. It includes several core properties, mastering them will enable you to control the pagination display at will:

• TotalItemsIndicates the total number of items contained, allowing you to know how many articles or products there are on the site.
• TotalPagesDisplays the total number of pages of content, making it convenient for users to understand the overall scale of the content.
• CurrentPage: Indicates the current page the user is browsing, which is the key to determining the active state.
• FirstPage: A link to the home page (Link) and name (Name) object, 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.
• NextPageThis includes the link and name of the next page, available when the current page is not the last page.
• PagesThis is an array object that includes the page number information of the middle part. It is usually used forforLoop, display each clickable page number 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 the 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 display only 5 page number links near the current page, and the rest will be omitted with an ellipsis or hidden directly.This is particularly useful for lists with a large number of page numbers, as it can prevent the pagination bar from being too long and causing page clutter.

We usually use<ul><li><a>Such HTML structure, and beautify them through CSS. Here is a common pagination navigation template code example that combinesshowParameter,pagesthe various properties of variables, and utilizesIsCurrentThe attribute is used to add special styles to the current page, making it clear to the user:

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

By this code, you can create a page with “Home”, “Previous”, “Next”, “Last” and middle page numbers (based onshowPage navigation with dynamically adjusted number of items.is-activeThe class name can be used to highlight the current page number, for example, by setting the background color or bolding the font, thus providing more intuitive visual feedback.

The display style of page numbers can be controlled by custom CSS filespagination-container/pagination-list/pagination-itemandis-activesuch as the 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

To implement pagination navigation in AnqiCMS, it is essentially a combination of content list tagstype="page"Attribute, as wellpaginationtags pairpagesflexible application of objects. By understandingpagesvarious data provided by objects, and make good use ofshowThe parameter controls the number of page numbers, and combined with custom HTML structure and CSS style, you can provide a beautiful and practical pagination navigation system for the website, greatly enhancing the user's browsing experience.

Frequently Asked Questions (FAQ)

1. My pagination navigation did not display or the link after clicking is incorrect, where is the problem?

Firstly, please make sure you are getting the tags for the content list (such asarchiveList/tagDataListCorrectly set intype="page"The parameter. If this parameter is missing, the system will not generate pagination data. Secondly, check if you have placedpaginationthe list tag before the tag,paginationLabel variable name (for example)pages) The variable generated by the list tag matches. Finally, check if your website's static rules are configured correctly, as incorrect static rules can cause pagination links to fail to parse.

2. How can the current page number be made more prominent visually, making it easier for users to identify?

In the above example, we usedpages.PagesEach page number item has its ownIsCurrentproperty. When a page number is the current page,IsCurrentThe value istrue. You can use 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. How can I better control the display quantity of middle page numbers on my website if it has a lot of pages (like hundreds)?

You can usepaginationlabel'sshowThe parameter is used to accurately control the number of middle page numbers. For example, if you want to display 2 page numbers before and after the current page number (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 the template or if the system provides it by default).This can prevent the pagination bar from taking up too much space when there are too many page numbers.