How to configure the pagination display of the article list and allow custom pagination links and styles?

In website operation, when the amount of content continues to grow, how to effectively organize and present these contents so that users can easily browse through 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 provides a powerful and flexible template tag feature that allows us to easily configure the pagination display of article lists and customize the link structure and visual style according to actual needs.

Configure the article list to enable pagination function

To enable pagination for the article list, we first need to usearchiveListTags to obtain article data. This tag allows us to specify the way articles are obtained, such as by category, model, or recommended attributes, etc. One important parameter istypeWhen it is set to"page"the system will know that the 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 a list of articles under a certain category and display 10 articles per page, we can set it up like thisarchiveListTags:

{% 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 block,archivesis the variable name we define, which will contain the article data for the current page.categoryId="1"Specified the article category ID,limit="10"Then set to display 10 articles per page. Whentype="page"It is set, archiveListTags not only return article data, but also prepare all the information needed for pagination, which is usually stored in a variable namedpagesfor use by 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 specialpaginationLabels to handle this task. This label will receive byarchiveListPage information generated by or other list labels, and convert it into pagination data available for template rendering.

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

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

Here, pagesIt is the previous onearchiveListThe pagination information variable implicitly generated by the label.show="5"The parameter specifies the maximum number of page number buttons to display in pagination navigation, for example, showing the current page and two pages before and after.

pagesThe variable contains rich pagination information, we can build a complete navigation based on this information. It provides the following commonly used fields:

• TotalItems: Total number of articles.
• TotalPages: Total number of pages.
• CurrentPage: The current page number.
• FirstPage: Home object (including linksLinkAnd NameName)
• LastPage: Last page object.
• PrevPage: Previous page object.
• NextPage: Next page object.
• Pages: An object containing all middle page numbers (also containingLink/NameandIsCurrent).

Using these fields, we can build a 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, only when the corresponding page exists will the link be displayed, for example, the "Previous Page" button will not appear on the first page. At the same time,{% if item.IsCurrent %}the judgment can add a page number for the current page.activeThe class, for highlighting through CSS.

Custom pagination links and styles

Custom pagination links:

AnQi CMS is generatingpagesVariables inside, when 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 rules" on the backend, for example, by selecting the "numeric mode" or "model naming mode", or even a custom mode,paginationTag provided.LinkThese rules will automatically match.

For example, if your pseudo-static rules are configured asarchive==={module}/{id}.htmlThen the pagination links may be/article/list-2.html//article/list-3.htmlAnd so on. You do not need to manually concatenate URLs in the template, just use{{ pages.FirstPage.Link }}or{{ item.Link }}You can get links that meet the SEO and website structure requirements.

paginationThe tag also provides an advanced parameter.prefixFor example, if your pagination URL requires an unconventional query parameter form, such asprefix="?page={page}"Then the pagination links will be displayed as?page=2/?page=3etc. This may be used in certain specific scenarios, but in most cases, following the pseudo-static rules is more recommended.

Custom pagination style:

The visual style of pagination is completely determined by your HTML structure and CSS definitions. In the above example, we useddivandul li athe structure, and addedpagination-navandpage-itemWait for 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 completely 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.The AnQi CMS provides data and structured capabilities, while the front-end style is left to designers and developers to fully express 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 feature configuration to fine style adjustment, the entire process revolves around usability and customizability, ensuring that your website can provide an excellent user experience and meet unique visual needs.

Frequently Asked Questions (FAQ)

1. Question: My article list has already usedarchiveListtags and set them uptype="page"andlimitWhy is the pagination navigation still not displayed on the page?Answer: Please check if you are inarchiveListjust after the tagpaginationTags to render pagination navigation.archiveListTags are responsible for providing the data required for pagination, while the actual navigation rendering needspaginationto be completed by tags. Make sure that yourpaginationtags have enough HTML structure inside to display page number links, andpagesVariable name andarchiveListGenerated variable name matches.

2. Question: I want to make my pagination links more SEO-friendly, for example, including category names or article model names, how can I achieve this?Answer: The pseudo-static rules function of AnQi CMS is designed for this purpose.You can select the preset "Model Naming Pattern", "Category Naming Pattern", or "Custom Pattern" in the "Function Management" -> "Static Rule" section on the backend to define your URL structure.Once the background configuration is completed,paginationThe tag is automatically generatedLinkThe attribute will follow the rules you set, without the need for additional manual assembly in the template, which can ensure the SEO friendliness of pagination links.

3. How to add a highlight style to the current page number in pagination navigation?Answer: Inpaginationlabel's{% for item in pages.Pages %}In the loop, eachitemObjects all contain aIsCurrentboolean value attribute. You can use conditional judgment{% if item.IsCurrent %}to highlight the current page number's<li>or<a>Add a specific CSS class to the tag, for exampleactive. Then add this to your CSS file.activeDefine class highlighting styles, such as changing background color or font color, can achieve the visual highlighting of the current page number.