AnQiCMS (AnQiCMS) is a powerful content management system that provides flexible and diverse ways to display content when building a website.Among them, the pagination feature is crucial for list pages with a large amount of content, as it not only improves user experience but also optimizes website performance.paginationTags can help us accurately control the display logic of pagination, thereby creating a more friendly and professional website.

This article will delve deeper intopaginationHow to use the tag, focusing on how to obtain the current page number, total page number, and build navigation links to the home page and the last page.

UnderstandpaginationBasic structure of the tag

In AnQi CMS,paginationTags are usually used with list-like tags such asarchiveList/tagDataListorcommentListUse in conjunction with, and these list tags must be settype="page"Pattern to enable pagination functionality

paginationThe basic usage of the tag is as follows:

{% pagination pages with show="5" %}
    {# 在这里放置你的分页逻辑 #}
{% endpagination %}

Here, pagesIs the variable name we define for pagination data, you can name it according to your habit.with show="5"This is an optional parameter used to specify the maximum number of page link navigation. For example,show="5"which means that up to 5 page numbers around the current page will be displayed.

Get core pagination information: current page number, total pages, and total number of items

paginationThe tag will expose a rich pagination informationpagesThe object. Through this object, we can easily obtain the key data of the page:

  • Current page code (CurrentPage) {{pages.CurrentPage}}You can directly output the current page number of the user. This is very useful for displaying information like 'Page X' on the page.
  • Total number of pages (TotalPages) {{pages.TotalPages}}How many pages of content are returned in total. This gives users a direct understanding of the overall scale of the content.
  • Total number of items (TotalItems)Although it is not directly included in the title question, but{{pages.TotalItems}}It is also a very useful attribute, it represents the total number of entries for all the content in the list.In many scenarios, we may need to display prompts like 'Total X records' next to pagination.

This information is usually used to display pagination status to users, for example:共 {{pages.TotalItems}} 条记录，分为 {{pages.TotalPages}} 页，当前是第 {{pages.CurrentPage}} 页。

Build flexible navigation links: home page, last page, previous page, next page, and middle page numbers

In addition to basic page number information,pagesThe object provides all the links and states required to build a complete pagination navigation:

  • Home link (FirstPage) pages.FirstPageIs an object that containsLink(The URL of the home page) andName(usually "Home" or "首页"). We can alsopages.FirstPage.IsCurrentto determine whether we are currently on the home page, so that we can add a highlight style to it.

  • link to the last page (LastPage)similar to the home page,pages.LastPageIt is also an object, containingLinkAnd the URL of the last pageName(usually "last page" or "Last").pages.LastPage.IsCurrentUsed to determine if the current page is the last page.

  • Previous/next page links (PrevPage/NextPage) pages.PrevPageandpages.NextPageRepresent the navigation objects for the previous and next pages. They also containLinkandNameproperties. It should be noted that when on the first pagePrevPagethey will not exist, and when on the last pageNextPageWill not exist. Therefore, a conditional judgment must be made when referencing them in the template, for example{% if pages.PrevPage %}.

  • Link to the middle page number (Pages) pages.Pagesis an array that contains all the middle page numbers displayed in the pagination navigation (i.e., the specific page numbers except for the first page, last page, previous page, and next page). We can access them byforLoop through this array:

    {% for item in pages.Pages %}
    <a class="{% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
{% endfor %}

    EachitemAlso containsName(Page number, such as “1”, “2”),Link(The URL corresponding to the page number) andIsCurrent(whether it is the current page).

A complete pagination navigation example code

Combine all the above knowledge points, the following is an example of a complete and functional pagination navigation code:

<div class="pagination">
    {# 使用 archiveList 标签获取分页数据，确保 type="page" #}
    {% archiveList archives with type="page" limit="10" %}
        {# 这里是你的列表内容，例如文章标题、摘要等 #}
        {% for item in archives %}
            <div class="article-item">
                <a href="{{ item.Link }}">
                    <h3>{{ item.Title }}</h3>
                    <p>{{ item.Description|truncatechars:100 }}</p>
                </a>
                <span class="info">发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
            </div>
        {% empty %}
            <p>暂无内容。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 分页导航区域 #}
    <div class="pagination-nav">
        {% pagination pages with show="5" %}
            <p class="pagination-summary">
                共 <span>{{pages.TotalItems}}</span> 条，总 <span>{{pages.TotalPages}}</span> 页，当前第 <span>{{pages.CurrentPage}}</span> 页
            </p>
            <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>
        {% endpagination %}
    </div>
</div>

<style>
/* 简单的分页样式，实际项目中请根据需要调整 */
.pagination-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.pagination-nav li {
    margin: 0 5px;
}
.pagination-nav a {
    display: block;
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
}
.pagination-nav .active a,
.pagination-nav a:hover {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
.pagination-summary {
    text-align: center;
    margin-bottom: 15px;
    color: #666;
}
.pagination-summary span {
    font-weight: bold;
    color: #333;
}
</style>

This code demonstrates how to usepaginationtags, and through the providedpagesAn object that flexibly constructs a complete pagination navigation containing the current page number, total number of pages, total number of items, first page, last page, previous page, next page, and middle page numbers. ThroughIsCurrentThe property allows us to easily add highlight styles to the current page, thereby enhancing the user experience.

Summary

`