How to conditionally display the 'Previous' and 'Next' buttons in the `pagination`?

As an experienced website operation expert, I am willing to delve into the conditional display techniques of the pagination navigation buttons in Anqi CMS.AnQi CMS is known for its efficiency and flexibility, its template engine provides powerful features, allowing us to easily realize both beautiful and practical page interactions.In website content management, pagination is an indispensable element, and how to intelligently display the "Previous Page" and "Next Page" buttons is directly related to the smoothness of the user's browsing experience.

AnQi CMS: Creating an Intelligent Pagination Navigation - How to Conditionally Display 'Previous Page' and 'Next Page' Buttons

On a content-rich website, pagination is the core mechanism for organizing and presenting a large amount of information.A well-designed, intuitive pagination system that can significantly enhance the user's browsing experience.In Anqi CMS, we take advantage of its powerful template tags to flexibly control the display logic of pagination navigation, especially the conditional display of the key buttons such as 'Previous Page' and 'Next Page' to avoid invalid links when not needed, maintaining the interface's cleanliness and professionalism.

Why is it Necessary to Conditionally Display 'Previous Page' and 'Next Page' Buttons?

Imagine, when the user is browsing the first page of the list, if the 'Previous Page' button is still visible and clickable, the user may encounter a blank page or an error page after clicking, which undoubtedly brings a bad experience.Similarly, displaying the "Next Page" button on the last page will also cause similar problems.By conditionally displaying, we ensure that these navigation elements only appear when logically feasible, thus:

  1. Improve user experience:Avoid users from clicking on invalid links, reducing confusion and frustration.
  2. Keep the interface tidy:Only display elements that are useful in the current state, making the page layout clearer.
  3. Optimize front-end performance:Reduce unnecessary rendering of DOM elements, although this is usually a negligible optimization.

Anqi CMS pagination tag overview

In AnQi CMS, the pagination feature usually works with content list tags (such asarchiveListcooperatetype="page")协同工作。archiveListThe tag will return a set of pagination information when it retrieves pagination content.pagesObject. And today's core is to make use of thispagesDetermine whether the "Previous Page" and "Next Page" buttons should be displayed by using specific fields in the object.

Pagination LabelpaginationBasic usage is{% pagination pages with show="5" %}...{% endpagination %}. This tag will encapsulate all data related to pagination, including the total number of items, total number of pages, current page number, first page, last page, previous page, next page, and the list of middle page numbers, all within a namedpagesthe variable is used for template.

core variables and judgment logic

Inpagesin the object, there are two fields that are crucial for our implementation of conditional display:pages.PrevPageandpages.NextPage.

  • pages.PrevPageThis is an object that contains the name (Name) and link (Link) of the previous page.
  • pages.NextPage: It is also an object that includes the name (Name) and link (Link) of the next page.

The AnQi CMS template engine (developed based on Go language, with syntax similar to Django templates) is very intelligent in handling conditional judgments. When there is no previous page,pages.PrevPageThis object will be empty (nil). Similarly, when there is no next page,pages.NextPageit will also be empty. The Go language template engine'sifjudgment will automatically treat these empty (nil) objects asfalseThis means that we can simply use{% if pages.PrevPage %}and{% if pages.NextPage %}such a structure to achieve conditional display of buttons.

Practice operation: Conditionally display 'Previous page' and 'Next page'

Let us demonstrate how to implement this function through a specific template code snippet. This is usually completed in yourarchiveListpagination area after the tag.

First, you need to go through the template in order toarchiveListLabel to get pagination data:

{% archiveList archives with type="page" limit="10" %}
    {# 循环显示文章列表内容 #}
    {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h5>{{item.Title}}</h5>
                <div>{{item.Description}}</div>
                <div>
                    <span>{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                    <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                    <span>{{item.Views}} 阅读</span>
                </div>
            </a>
            {% if item.Thumb %}
                <a href="{{item.Link}}">
                    <img alt="{{item.Title}}" src="{{item.Thumb}}">
                </a>
            {% endif %}
        </li>
    {% empty %}
        <li>
            该列表没有任何内容
        </li>
    {% endfor %}
{% endarchiveList %}

Then, followed by your content list, usepaginationLabel to build pagination navigation, and use it cleverly inifConditional judgment:

<div class="pagination">
    {% pagination pages with show="5" %}
        <ul>
            {# 首页按钮：通常总是显示，但可以根据pages.FirstPage.IsCurrent来添加active样式 #}
            <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 %}

            {# 中间页码列表：循环显示，并为当前页添加active样式 #}
            {% 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 %}

            {# 尾页按钮：通常总是显示，但可以根据pages.LastPage.IsCurrent来添加active样式 #}
            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
            </li>
        </ul>
        <p>总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</p>
    {% endpagination %}
</div>

In this example,{% if pages.PrevPage %}and{% if pages.NextPage %}It is the key to conditional display. Whenpages.PrevPageorpages.NextPageThe object is not empty, corresponding to<li>elements and their internal<a>The link will be rendered on the page. This way, on the first page, you will not see the 'Previous page' button;On the last page, the 'Next Page' button does not appear, thus providing a more intelligent and user-friendly pagination navigation.

Summary and **practice**

Passing through the Aanqi CMS'spaginationThe tag with its built-in logical judgment ability allows us to easily implement the conditional display of "Previous Page" and "Next Page" buttons in pagination navigation.This method is not only concise and efficient in code but also greatly enhances the user experience and professionalism of the website interface.

When developing templates, it is always recommended to fully utilize the built-in features of the Anqi CMS template engine.They are often carefully designed to solve common display and logical problems in the most elegant way.When implementing pagination functionality, in addition to conditional display, you can also adjust according to your needsshowParameters to control the number of middle page numbers, and even through CSS to beautify the pagination style, making it perfectly blend with your website design style.

Frequently Asked Questions (FAQ)

  1. Why did I set the pagination label, but the 'Previous Page' and 'Next Page' buttons still did not appear?Please first check if you have set the content list label (such asarchiveList) whether it is set.type="page". Only whentypethe parameter to"page"then,archiveListIt will generate complete pagination information and pass it on topaginationtag. If set totype="list", thenarchiveListit will only return a specified number of list items without pagination information,pages.PrevPageandpages.NextPageit will naturally be empty.

  2. Ask: If I don't want to display the "First Page" and "Last Page" buttons, can I only show the "Previous Page", "Next Page" and the middle page numbers?Answer: Of course you can. You just need topaginationTag the code block, thenpages.FirstPageandpages.LastPagethe corresponding<li>Remove the element. The flexibility of the Anqi CMS template allows you to freely cut and combine these pagination elements according to your actual needs.

  3. How to modify the display text of the 'Previous' and 'Next' buttons, for example, changing them to 'Previous' and 'Next'?Answer: Inpages.PrevPageandpages.NextPageThe object itself contains,NameField, for example{{pages.PrevPage.Name}}Default display is 'Previous page',{{pages.NextPage.Name}}The default is "Next page". If you wish to customize this text, it usually needs to be modified in the Anqi CMS backend language package or related configuration, or directly in the template.{{pages.PrevPage.Name}}Replace with the hard-coded text (for examplePrevious). However, it is recommended to modify the backend language package management to support multi-language switching.