In the `pagination` tag, how to determine if the current page is the first or last page to control the style?

As an experienced website operations expert, I know the importance of a powerful and flexible content management system for the success of a website.AnQiCMS leveraging its efficient features of the Go language and in-depth consideration of content operation, provides us with many conveniences.paginationThe versatility of pagination tags, especially how to accurately determine whether the current page is the first or last page, thus flexibly controlling the style to create a more smooth and intuitive navigation experience for users.

The core of AnQiCMS pagination tags: understandpagesobject

In the world of AnQiCMS templates,paginationTags are the core tools for handling pagination logic. They are usually associated witharchiveListThis list tags work together to package all pagination-related data into an object namedpages. ThispagesThe object contains rich information about the current list page, such as the total number of items,TotalItems), Total number of pages (TotalPages)、current page (CurrentPage) and so on.

To achieve the topic we are discussing today - determining whether the current page is the first or last page and controlling the style, the most critical attribute is undoubtedly the page number objects (includingpages.FirstPage/pages.LastPageas well aspages.PagesEach in the arrayitemAll haveIsCurrentfield. It is a boolean value, which is true only when the page is the current visited page, its value istrue. It is this tiny boolean value that gives us the ability to precisely control the page style.

Precisely judge and control the home page style.

When a user is browsing the list page, the homepage usually has a special meaning.We may hope that when the current page is the homepage, we should give the "homepage

To determine if the current page is the homepage, we can directly utilizepages.FirstPage.IsCurrentthe attribute. When this attribute istrue, there is no doubt that the user is on the first page.

In the template, you can handle the style of the "Home" link in this elegant way:

<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
    <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
</li>

The above code will be based onpages.FirstPage.IsCurrentvalue, dynamically add or remove<li>elementsactiveThus, the class can be used to highlight or distinguish visually.

As for the 'Previous Page' button, when the page is on the first page, it should be unclickable. AnQiCMS'spagesThe object provides very consideratelypages.PrevPagethe property. If the current page is the first page, thenpages.PrevPageit will benil(empty value), we can use this to control its clickable state:

{% if pages.PrevPage %}
    <li class="page-item">
        <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
    </li>
{% else %}
    <li class="page-item disabled">
        <span>上一页</span> {# 此时没有上一页链接，显示为不可点击的文本 #}
    </li>
{% endif %}

In this way, we not only controlled the style, but also disabled the invalid operation of clicking "Previous page" on the homepage, improving the user experience.

Flexible control of the style of the last page.

This logic is similar to the home page, we also need to pay special attention to the end page.When the user scrolls to the end of the list, disable the "next page" and "last page" links, which can clearly inform the user that there is no more content, avoiding unnecessary clicks.

Determine whether the current page is the last page, the idea is consistent with the first page, we still rely onpages.LastPage.IsCurrentattribute. When its value istrue, the current page is the last page.

This is an example of the style control for the "last page" link:

<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
    <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>

Similarly, for the "next page" button, it should be disabled when on the last page. We can check bypages.NextPageTo implement the property:

`twig {% if pages.NextPage %}

<li class="page-item">
    <a href="{{pages.NextPage