In website operation, as the content volume grows, how to effectively organize and present these contents so that users can easily browse them is the key to improving user experience and website performance.The pagination display of the article list is an important means to achieve this goal.AnQiCMS (AnQiCMS) provides powerful and flexible template tag features, allowing us to easily configure the pagination display of article lists and customize the link structure and visual style of pagination according to actual needs.

Configure the article list to enable pagination functionality

To enable pagination for the article list, we first need to usearchiveListLabel to obtain article data. This label allows us to specify the way to obtain articles, such as by category, by model, or by recommended attributes, etc. One important parameter istypeWhen we set it to"page", the system will know that this list needs pagination. At the same time,limitthe parameter is used to define the number of articles displayed per page.

For example, if we want to get the list of articles under a certain category and display 10 articles per page, we can set it like this.archiveListTags:

{% archiveList archives with type="page" categoryId="1" limit="10" %}
    {# 这里是文章列表的循环内容 #}
    {% for item in archives %}
        <div class="article-item">
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            <p>{{ item.Description }}</p>
            <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
        </div>
    {% empty %}
        <p>暂无文章内容。</p>
    {% endfor %}
{% endarchiveList %}

In this code,archivesis the variable name we define, which will contain the article data for the current page.categoryId="1"指定了文章的分类ID，limit="10"则设置了每页显示10篇文章。当type="page"被设定后，archiveListThe label not only returns article data but also prepares all the information needed for pagination, which is usually stored in a variable namedpagesfor subsequent pagination tags.

Flexible use of pagination tags to display navigation

After the article list data is ready, the next step is to display the pagination navigation. Anqi CMS provides a specialpaginationLabel to handle this task. This label will receive the pagination information generated byarchiveListor other list labels, and convert it into pagination data that can be rendered by the template.

paginationThe use of labels is very intuitive, we usually call it like this:

<div class="pagination-container">
    {% pagination pages with show="5" %}
        {# 分页导航的具体渲染逻辑 #}
    {% endpagination %}
</div>

Here,pagesThat is the one beforearchiveListThe variable of pagination information implicitly generated by labels.show="5"The parameter specifies the maximum number of page buttons to display in the pagination navigation, for example, displaying the current page and two pages before and after.

pagesThe variable contains rich pagination information, which we can use to build complete navigation. It provides the following common fields:

  • TotalItems: Total number of articles.
  • TotalPages: Total number of pages.
  • CurrentPageCurrent page number.
  • FirstPage: Home object (includes links)Linkand nameName).
  • LastPage：End page object.
  • PrevPage：Previous page object.
  • NextPage：Next page object.
  • Pages：An object containing all intermediate page numbers (including)Link/NameandIsCurrent）.

Using these fields, we can construct the complete pagination navigation structure:

<div class="pagination-nav">
    {% pagination pages with show="5" %}
        <ul>
            {% if pages.FirstPage %}
                <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                    <a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
                </li>
            {% endif %}

            {% 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 {% 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 %}

            {% if pages.LastPage %}
                <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                    <a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
                </li>
            {% endif %}
        </ul>
        <p>总共 {{pages.TotalItems}} 篇文章，分为 {{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页。</p>
    {% endpagination %}
</div>

This code builds a complete pagination navigation containing "Home","Previous Page","Page Number","Next Page", and "End Page".{% if ... %}Judgment, the link will only be displayed when the corresponding page exists, for example, the "Previous page" button will not appear on the first page.{% if item.IsCurrent %}judgment can add a link to the current page number.activeClass, for easy highlighting through CSS.

Custom pagination links and styles

Custom pagination links:

Safe CMS in generatingpagesVariables, their internalLinkThe field will be automatically generated according to the "pseudo-static rules" of the website backend. This means that we only need to configure the URL format in the "Function Management" -> "Pseudo-static Rulespaginationin the tags providedLinkwill automatically match these rules.

For example, if your pseudo-static rule configuration is set toarchive==={module}/{id}.html, then the pagination links may be/article/list-2.html//article/list-3.htmletc. You do not need to manually concatenate URLs in the template, just use{{ pages.FirstPage.Link }}or{{ item.Link }}You can obtain links that meet the requirements of SEO and website structure.

paginationThe tag also provides advanced parametersprefixIf your pagination URL requires an unconventional query parameter form, such asprefix="?page={page}"then the pagination links will be?page=2/?page=3This is presented in a certain form. This may be used in some specific scenarios, but following pseudo-static rules is generally recommended.

Custom pagination style:

The visual style of pagination is entirely dependent on your HTML structure and CSS definitions. In the above example, we useddivandul li athe structure, and addedpagination-navandpage-itemEnglish CSS classes. You can define the styles of these classes in your template CSS file, for example:

/* pagination-nav 容器样式 */
.pagination-nav {
    margin-top: 20px;
    text-align: center;
}

.pagination-nav ul {
    display: inline-block; /* 让分页按钮居中 */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 单个分页项样式 */
.pagination-nav .page-item {
    display: inline-block;
    margin: 0 5px;
}

/* 分页链接样式 */
.pagination-nav .page-item a {
    display: block;
    padding: 8px 12px;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* 鼠标悬停样式 */
.pagination-nav .page-item a:hover {
    background-color: #eee;
    border-color: #bbb;
}

/* 当前页码样式 */
.pagination-nav .page-item.active a {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
    font-weight: bold;
    cursor: default;
}

By modifying these CSS rules, you can fully control the layout, color, font, size, and other visual effects of the pagination navigation, making it consistent with the overall design style of your website.Auto CMS provides data and structured capabilities, while the front-end style is left to designers and developers to fully demonstrate their creativity.

In summary, Anqi CMS provides us with a highly flexible way to manage the pagination display of article lists through its concise and powerful template tags.From basic function configuration to fine-tuning of styles, the entire process focuses on usability and customizability, ensuring that your website provides an excellent user experience while meeting unique visual needs.

Common Questions and Answers (FAQ)

  1. Question: My article list has already usedarchiveListand set the tagtype="page"andlimitWhy is the pagination navigation still not displayed on the page?Answer: Please check if you arearchiveListused immediately after the tagpaginationtag to render pagination navigation.archiveListThe label is responsible for providing the data required for pagination, while the actual navigation renderingpaginationneeds to be completed by yourpaginationlabel. Ensure that your label has enough HTML structure to display page number links,pagesVariable names match with.archiveListGenerated variable names match.

  2. Q: I want to make my pagination links more SEO-friendly, such as including category names or article model names. How can I achieve this?答：The pseudo-static rules function of Anqi CMS is designed for this.You can choose preset 'Model Naming Pattern', 'Category Naming Pattern' or 'Custom Pattern' under 'Function Management' -> 'Rewrite Rule' in the background to define your URL structure.paginationTags are automatically generated.LinkThe attribute will follow the rules you set, there is no need for additional manual assembly in the template, which can ensure the SEO-friendliness of pagination links.

  3. 问：How to add a highlight style for the current page number in pagination?Answer: InpaginationTags{% for item in pages.Pages %}in the loop, eachitemAll objects contain aIsCurrentboolean value property. You can use conditional judgment{% if item.IsCurrent %}to highlight the current page number of<li>or<a>Add a specific CSS class to the label, for exampleactiveThen in your CSS file for theactiveClass definition highlighting style, such as changing the background color or font color, can achieve visual highlighting of the current page number.