As an experienced website operations expert, I am more than happy to delve into the conditional display techniques of pagination navigation buttons in Anqi CMS.AnQi CMS is known for its efficiency and flexibility, with its template engine providing powerful functions that allow us to easily implement 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.
Intelligent Pagination Navigation: How to Conditionally Display 'Previous Page' and 'Next Page' Buttons
In 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 utilize its powerful template tags to flexibly control the display logic of pagination navigation, especially the conditional display of the 'Previous Page' and 'Next Page' buttons, to avoid invalid links when not needed, maintaining the interface's neatness and professionalism.
Why is it Necessary to Conditionally Display 'Previous Page' and 'Next Page'?
Imagine a scenario where the user is browsing the first page of a list. If the 'Previous Page' button is still visible and clickable, the user might encounter a blank page or an error page upon clicking, which undoubtedly leads to a poor experience.Similarly, displaying the "Next Page" button on the last page will also cause similar issues.
- Enhance user experience:Avoid users from clicking invalid links, reducing confusion and frustration.
- Maintain a clean interface:Only display elements that are useful in the current state, making the page layout clearer.
- Optimize front-end performance:Reduce unnecessary DOM element rendering, although this is usually a minimal optimization.
Overview of the Anqi CMS pagination tags
In AnQi CMS, the pagination feature usually works with content list tags (such asarchiveListwithtype="page") in collaboration.archiveListTags will return a set of pagination information when getting pagination content.pages[en]The object. And our core today is to utilize thispagesto determine whether the 'Previous' and 'Next' buttons should be displayed.
Pagination tabpaginationis the basic usage of{% pagination pages with show="5" %}...{% endpagination %}This tag will encapsulate all data related to pagination, including the total number of items, the total number of pages, the current page number, the first page, the last page, the previous page, the next page, and the list of middle page numbers, into a namedpagesThe variable is provided for template use.
Core variables and judgment logic
InpagesThere are two fields in the object that are crucial for our implementation of conditional display:pages.PrevPageandpages.NextPage.
pages.PrevPageThis is an object that includes the 'Previous Page' name (Name) and link (Link).pages.NextPageSimilarly, it is an object that includes the 'next page' name (Name) and link (Link).
The template engine of AnQi CMS (developed in Go language, 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 willifautomatically treat these empty (nil) objects asfalseThis means, we only need to simply use{% if pages.PrevPage %}and{% if pages.NextPage %}such a structure to implement the conditional display of buttons.
Practice operation: conditional display of 'Previous page' and 'Next page'
Next, let us demonstrate how to implement this feature through a specific template code snippet. This is usually completed in the area after the tag.archiveListpagination area.
Firstly, you need to get pagination data through the template byarchiveListusing the tag:
{% 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, following your content list, use thepaginationtag to build pagination navigation and make clever use ofifConditional 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, the corresponding<li>elements and their internal<a>The link will be rendered on the page.So, on the first page, you will not see the 'Previous Page' button; on the last page, the 'Next Page' button will not appear, thus providing a more intelligent and user-friendly pagination navigation.
Summary and **Practice
Through the AnQi CMSpaginationLabel and 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 improves 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.showControl the number of middle page numbers, even beautify the pagination style through CSS, making it perfectly blend with your website design style.
Common Questions (FAQ)
Ask: Why do the 'Previous' and 'Next' page buttons still not appear even though I have set the pagination tags?Answer: Please first check if the content list tag (such as
archiveList) is settype="page"Only whentypeparameter settings"page"whenarchiveListthe complete pagination information is generated and passed topaginationthe tag. If set totype="list", thenarchiveListit will only return the specified number of list items without pagination information,pages.PrevPageandpages.NextPagethe result will naturally be empty.Ask: Can I only display the 'Previous page' and 'Next page' buttons, and not the 'Home' and 'End' buttons, with the middle page numbers?Answer: Of course you can. You just need to
paginationIn the code block of the label, you can remove the element.pages.FirstPageandpages.LastPagecorresponding<li>The flexibility of the Anqi CMS template allows you to freely cut and combine these pagination elements according to your actual needs.How to modify the display text of the 'Previous' and 'Next' buttons, such as changing them to 'Previous' and 'Next'?Answer: In
pages.PrevPageandpages.NextPageThe object itself contains,NameField, for example{{pages.PrevPage.Name}}The default display is “Previous page”,{{pages.NextPage.Name}}The default is "Next Page". If you wish to customize this text, it usually requires modifying the language package or related settings in the Anqi CMS backend, or directly in the template.{{pages.PrevPage.Name}}Replace with the hard-coded text you want (e.g.,Previous). However, it is recommended to modify it through the backend language package management to support language switching.