How to display a list of articles with pagination and customize the style and number of pagination navigation pages?

Today, with the rich content of websites, how to efficiently display a large number of articles while ensuring a smooth user browsing experience is a problem that every website operator needs to think about.AnQiCMS (AnQiCMS) offers a powerful and flexible pagination feature for article lists, which not only helps optimize the presentation of website content but also integrates better with the overall website design through custom styles and page number settings, enhancing user interaction experience.

Next, we will delve into how to implement pagination display of article lists in Anqi CMS, and we will give a detailed explanation of how to customize the style and number of pagination navigation according to your needs.

One, implement the pagination display of the article list

In Anqi CMS, to display the article list in pagination, the core lies in using template tagsarchiveListto obtain the data and specify it as pagination mode.

First, you need to use the template file (usually the list page template, such as{模型table}/list.htmlor a custom list template) in usearchiveListThe label is used to retrieve article data. This label is very flexible, and can be used to filter articles based on various conditions such as category ID, model ID, recommendation attributes, etc.

The key is to providearchiveListLabel settingstype="page"The parameter. Once set, the Anqin CMS will automatically handle the pagination logic of the current page, based on your specificationslimitThe parameter (number of articles per page) is used to return the articles on the current page.

For example, if you want to display 10 articles per page under the current category, you can write the code like this:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <a href="{{item.Link}}">
            <h4>{{item.Title}}</h4>
            <p>{{item.Description}}</p>
            <div class="meta">
                <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量：{{item.Views}}</span>
            </div>
        </a>
        {% if item.Thumb %}
        <a href="{{item.Link}}">
            <img src="{{item.Thumb}}" alt="{{item.Title}}">
        </a>
        {% endif %}
    </div>
    {% empty %}
    <p>抱歉，当前分类暂无文章。</p>
    {% endfor %}
{% endarchiveList %}

In this code block:

• archiveList archives with type="page" limit="10"Will retrieve 10 articles corresponding to the current page number and store the results inarchivesthe variable.
• {% for item in archives %}Loop through these articles,itemThe variable contains detailed information about each article, such as the title,item.Title) and link (item.Link), Description (item.Description) and so on.
• {% empty %}A block is used to display a friendly prompt when there is no article data, to avoid the page from being blank.

In this way, you have successfully enabled pagination for the article list. Next, we need to provide users with a tool to navigate to different page numbers.

II. Render pagination navigation

After the article list data is ready, it needs to be usedpaginationtags to generate and display the pagination navigation.paginationTags usually follow.archiveListAfter the tag is used, it will depend onarchiveListThe provided pagination information, automatically generates page number links and navigation buttons.

paginationTags will organize the pagination data into apagesAn object, which contains various useful information about the current pagination state, such as the total number of articles, total number of pages, current page number, home link, previous page link, next page link, end page link, and an array containing all visible page numbers.

A basic pagination navigation implementation may look like this:

<div class="pagination-container">
    {% pagination pages with show="5" %}
    <ul>
        {# 首页按钮 #}
        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        </li>
        {# 上一页按钮 #}
        {% 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 %}
        {# 尾页按钮 #}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        </li>
    </ul>
    <p>总共有 {{pages.TotalItems}} 篇文章，分为 {{pages.TotalPages}} 页，当前在第 {{pages.CurrentPage}} 页。</p>
    {% endpagination %}
</div>

In this code block:

• {% pagination pages with show="5" %}Tell the system to generate pagination navigation and store the pagination data inpagesthe variable.show="5"The parameter plays a crucial role here, it indicates that in the page number list, in addition to the home page, end page, previous page, and next page buttons, at most 5 middle page numbers are displayed (for example, when the total number of pages is very large, it will display1...3 4 5 6 7...100)
• pages.FirstPage/pages.PrevPage/pages.NextPage/pages.LastPageObjects representing the home, previous, next, and end pages, theirLinkproperties provide corresponding links,Nameproperties provide button text.
• pages.PagesIt is an array that contains the middle page number items. Through{% for item in pages.Pages %}Loop traversal,item.LinkProvide page link,item.NameProvide page number.
• item.IsCurrentorpages.FirstPage.IsCurrentBoolean values can determine whether the current page number is the one being viewed, which is crucial for highlighting the current page number.

Section 3: Customizing the style and number of pagination navigation

The AnQi CMS pagination tag provides sufficient flexibility, allowing you to achieve complete customization of styles by controlling tag parameters and pairing with CSS.

1. Customize page number count:As mentioned before,paginationlabel'sshowThe parameter directly controls the number of middle page number buttons.

• show="5": Up to 5 middle page numbers are displayed.
• show="7"The maximum number of middle page numbers displayed is 7. You can adjust this number based on the width of the page layout, user habits, and other factors to achieve the desired display effect. If omittedshowParameters, the system will have a default value, but for precise control, it is recommended to set it explicitly.

2. Customize pagination navigation style:By adding a custom CSS class to the HTML structure, you can fully control the visual presentation of pagination navigation.

In the above example, we usedpagination-container/page-itemandactiveName classes. You can write style rules for these classes in your CSS file, for example:

/* pagination-container 整体布局 */
.pagination-container {
    margin-top: 30px;
    text-align: center;
}

.pagination-container ul {
    list-style: none;
    padding: 0;
    display: inline-flex; /* 使页码水平排列 */
    margin: 0;
}

/* page-item 单个页码或按钮 */
.page-item {
    margin: 0 5px; /* 页码间距 */
}

.page-item a {
    display: block;
    padding: 8px 12px;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.page-item a:hover {
    background-color: #f5f5f5;
    color: #007bff;
    border-color: #007bff;
}

/* active 当前页高亮 */
.page-item.active a {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    pointer-events: none; /* 禁用当前页的点击事件 */
}

/* 隐藏不必要的文字（如首页/尾页按钮的默认文本在某些设计中可能不显示） */
.page-item:first-child a,
.page-item:last-child a {
    font-weight: bold;
}

By modifying these CSS rules, you can change the background color, text color, border, rounding, size, and even add animation effects to the pagination button, making it perfectly match the design style of your website.

Advanced Techniques and Precautions

• Pagination of Search Results: archiveListlabel'sqThe parameter is intype="page"This also works in the mode. This means that if you use the tag on the search results page, it will automatically identify the search keywords in the URLqand