How to use the `pagination` tag to generate a beautiful pagination navigation for articles or product lists?

In website operation, as the amount of content continues to grow, whether it is articles, products, or other lists, how to efficiently organize and display these contents while ensuring the smooth user browsing experience and the friendliness of search engines is a problem that requires careful consideration.Page navigation is the key tool to solve this problem.paginationTags, allowing you to easily create beautiful and functional pagination navigation for various lists.

The secret of pagination:paginationHow do tags work?

AnQiCMS'paginationTags do not exist independently, they are usually associated witharchiveList/tagDataListorcommentListUsed to obtain list data tags for use. The key is to set when using these list tags.type="page"Parameters, so AnQiCMS will prepare the data required for pagination of these lists. Once the data is ready,paginationLabels can intervene, converting these pagination data into operable navigation elements.

paginationThe basic usage of tags is very intuitive:

{% pagination pages with show="5" %}
    {# 在这里放置你的分页导航HTML结构 #}
{% endpagination %}

Here, pagesIt is a custom variable name that will carry all the data related to pagination.show="5"This is a practical parameter that determines the maximum number of page number links displayed in the middle area of pagination navigation, excluding “Home”, “Previous”, “Next”, and “End”. You can adjust this number according to the design of the page, for exampleshow="3"It makes navigation look more compact, whileshow="7"it can provide more visible page number choices.

Deep understandingpagesVariable: Master the various pagination data

Whenpaginationthe tag runs at runtime, it will provide you withpagesVariables fill a series of useful data, which is the basis for building flexible pagination navigation:

• pages.TotalItems: The total number of items in the current list, letting you know the total amount of content.
• pages.TotalPages: How many pages in total, helping users understand the depth of the content.
• pages.CurrentPage: The current page being viewed by the user, which is one of the core elements of user experience.

In addition to these basic data,pagesThe variable includes all the link objects that constitute a complete pagination navigation:

• pages.FirstPage: The link object pointing to the first page includes:Name(such as "Home"),Link(link address) andIsCurrent(whether it is the current page).
• pages.LastPage: Links to the last page object, which also includesName/LinkandIsCurrent.
• pages.PrevPage: Links to the previous page object. If it is the first page, this object may be empty and needs to be checked before use.
• pages.NextPage: A link object pointing to the next page. If it is the last page, this object may also be empty.
• pages.PagesThis is a very critical array, which contains the page number link objects displayed in the middle. Each object is likepages.FirstPageetc., and hasName(page number),Link(link address) andIsCurrent(whether the current page) these properties.

Create a beautiful pagination: flexibly use HTML and CSS

AnQiCMS'paginationThe strength of tags lies in the fact that they only provide data, while the specific display structure and style are entirely under your control.This means you can combine your own website design, freely customize the appearance of pagination navigation using HTML and CSS, so that it perfectly integrates with the overall style.

Here is a commonly used pagination navigation code example, which shows how to utilizepagesVariable data to build a fully functional and easy-to-beautify pagination:

<div class="pagination-container">
    {% pagination pages with show="5" %}
    <ul class="pagination-list">
        {# 显示总数信息 #}
        <li class="pagination-info">总数：{{pages.TotalItems}}条，共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>

        {# 首页链接 #}
        <li class="pagination-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        </li>

        {# 上一页链接 - 只有当有上一页时才显示 #}
        {% if pages.PrevPage %}
        <li class="pagination-item">
            <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        </li>
        {% endif %}

        {# 中间页码链接 - 循环输出 #}
        {% for item in pages.Pages %}
        <li class="pagination-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{item.Link}}">{{item.Name}}</a>
        </li>
        {% endfor %}

        {# 下一页链接 - 只有当有下一页时才显示 #}
        {% if pages.NextPage %}
        <li class="pagination-item">
            <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
        </li>
        {% endif %}

        {# 末页链接 #}
        <li class="pagination-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        </li>
    </ul>
    {% endpagination %}
</div>

In this example, we usedIsCurrentproperties to add the current page numberactiveClass, so you can define styles in CSS.pagination-item.activesuch as setting different background colors or font colors to highlight the current page clearly. At the same time, by judgingpages.PrevPageandpages.NextPageIs it possible, we can avoid displaying the 'Previous Page' and 'Next Page' buttons when not needed, further optimizing the user experience.

Application: The perfect combination of pagination and content list.

In actual template development,paginationtags are always closely linked with data list tags. For example, the complete structure on an article list page may look like this:

{# 假设这是你的文章列表页模板 #}

<div class="article-list-section">
    {% archiveList articles with type="page" limit="10" %}
        {% for article in articles %}
        <div class="article-item">
            <h2><a href="{{article.Link}}">{{article.Title}}</a></h2>
            <p>{{article.Description}}</p>
            <span class="date">{{stampToDate(article.CreatedTime, "2006-01-02")}}</span>
        </div>
        {% empty %}
        <p>目前没有文章发布。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

{# 在这里引入上面定义的分页导航HTML结构 #}
<div class="pagination-container">
    {% pagination pages with show="5" %}
        {# ... 上面的分页HTML代码 ... #}
    {% endpagination %}
</div>

By this means,archiveListThe tag is responsible for retrieving article data from the database page by page, whilepaginationthe tag usesarchiveListThe data provides pagination navigation. Both work together to present a page that is rich in content and easy to browse.

Conclusion

AnQiCMS'paginationTags provide a simple and powerful way to manage the content pagination of a website.It separates data from the presentation layer, giving you great freedom to design and implement any pagination style you want.paginationTags will be a powerful tool in website operation, helping your website content to be presented elegantly and efficiently to readers.

Frequently Asked Questions (FAQ)

1. Why does my pagination navigation not display, or display incorrectly?It is usually because you have not set the tags (such asarchiveList/tagDataListetc) in getting the list datatype="page"Parameter.paginationThe label needs list data returned in pagination mode to correctly generate pagination information. Please ensure that your list label is configuredtype="page".

2. **I can fully customize the pagination navigation