How to implement content pagination display and customize page navigation style in AnQiCMS template?

As the content of the website becomes richer, how to efficiently display a large amount of information while ensuring a user-friendly browsing experience is an indispensable part of website operation.In AnQiCMS, through the powerful template tag system, we can easily implement content pagination and flexibly customize the style of page navigation, making the website content rich and tidy.

Efficiently organize content: Implement pagination for content lists

In the AnQiCMS template, the core of implementing pagination for content is to usearchiveListTag to retrieve document lists. This tag is powerful, as it can not only list documents of specified categories or models, but can also be directly configured for pagination mode.

First, in your list page template (for example, the list page for the article model is usuallyarticle/list.htmlor a custom category list template) you will usearchiveListLabel. To enable pagination, you need to settypeparameters for"page"and utilizedlimitparameters to define the number of articles displayed per page. For example, if you want to display 10 articles per page, the code would look like this:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
        <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>
    </div>
    {% empty %}
    <p>当前分类下暂时没有文章。</p>
    {% endfor %}
{% endarchiveList %}

In this code block,archiveListThe tag will load the article data that meets the conditions into a variable namedarchivesand automatically paginate according to thelimitparameters. Inforthe loop,itemit represents each article, you can access it throughitem.Title/item.Link/item.DescriptionAccess various properties of the article in this way.{% empty %}The tag handles the scenario very considerately when there are no articles to display, avoiding a blank page.

Fine-grained control: Customize page navigation style

After the content list is displayed, the next step is to provide users with convenient page navigation. AnQiCMS providespaginationLabel. This label will be based onarchiveListLabel generates the total number of pages and the current page number, automatically generating a link that includes home, previous page, specific page number, next page, and last page, etc.pagesobject for you to render flexibly in the template.

InarchiveListBelow the label, use it immediatelypaginationLabel, and can be配合showParameter to control the number of page numbers displayed in page navigation. For example,show="5"It means that the page navigation can display a maximum of 5 page number digits (such as 1, 2, 3, 4, 5).

This is a complete example that combines content lists and page navigation, and incorporates considerations for style customization:

{% archiveList archives with type="page" limit="10" %}
    <div class="article-list">
        {% for item in archives %}
        <div class="article-item">
            <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
            <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>
        </div>
        {% empty %}
        <p>当前分类下暂时没有文章。</p>
        {% endfor %}
    </div>

    <div class="pagination-nav">
        {% pagination pages with show="5" %}
        <ul>
            {# 显示总条数和页码信息 #}
            <li>共 {{pages.TotalItems}} 篇文章，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</li>

            {# 首页链接，如果当前是第一页则高亮 #}
            <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 %}

            {# 中间页码数字，遍历 pages.Pages 数组 #}
            {% for pageItem in pages.Pages %}
            <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
                <a href="{{pageItem.Link}}">{{pageItem.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>
        {% endpagination %}
    </div>
{% endarchiveList %}

In the abovepaginationInside the tag,pagesThe object provides rich information:

• pages.TotalItemsandpages.TotalPagesThey represent the total number of articles and total pages.
• pages.CurrentPageIt is the current page being visited.
• pages.FirstPage/pages.LastPage/pages.PrevPage/pages.NextPageThey represent the navigation objects for the home page, last page, previous page, and next page, and they all containLink(link address) andName(Display text) attribute, as well as oneIsCurrentBoolean value to determine if it is the current page.
• pages.Pagesis an array that contains the specific page numbers of the middle part, each element is also an array that containsLink/NameandIsCurrentThe object of the property.

By using these properties, you can easily customize the appearance of page navigation. For example, through{% if pageItem.IsCurrent %}active{% endif %}such conditional judgments, for the current page's<li>Element additionactiveA class is then created, and its highlight style is set using CSS. Similarly,{% if pages.PrevPage %}This judgment can ensure that the corresponding navigation link does not display when there is no previous page or next page, thus maintaining the simplicity of navigation.

Flexible and variable: practical suggestions for improving user experience

1. CSS Customize AppearanceThe above example provides HTML structure and basicactiveThe specific page navigation beautification depends entirely on your CSS design. You can adjust the font, color, background, border, etc., to match the overall style of the website.
2. Template File Location: Generally, the template file for the list page is placed intemplate/{您的模板目录}/{模型table}/list.htmlFor exampletemplate/default/article/list.html. If you have a specific category that requires a different list layout, AnQiCMS also supports{模型table}/list-{分类id}.htmlsuch custom templates.
3. Combine search functionality: If your website contains a search function,archiveListThe tag is intype="page"mode, it will automatically read the URL inqThe parameter is used as a search keyword to implement pagination of search results. You do not need to handle the search results extra.