As an experienced website operations expert, I am happy to delve deeply into the exquisite aspects of AnQiCMS (AnQiCMS) in terms of content display, especially how to finely control the display of pagination navigation when the list content is empty.This not only concerns the beauty of the page, but also directly affects the user experience and the professionalism of the website.
WhenarchiveListHow to elegantly hide pagination navigation when the query results are empty? AnQiCMS template technique analysis
In a content management system, the list page is the core entry point for users to browse information. Anqi CMS, with its high efficiency and flexibility, provides us witharchiveListSuch a powerful tag, used to easily obtain and display various types of document content. At the same time,paginationThe tag is responsible for providing convenient pagination navigation for these lists.However, a common operational scenario is: when the document content under a certain category, search results, or filtering condition is empty, it is redundant and reduces the user experience to still display a lonely pagination navigation (such as "Page 1 / Total 1") on the page.
Today, let's delve into how to巧妙ly handle in AnQiCMS.archiveListWhen the query result is empty, letpaginationthe label also disappears.
Understand the template mechanism and core tags of AnQiCMS
AnQiCMS's template system draws on the syntax of the Django template engine, which is renowned for its simplicity and power. In the development of content list pages, we mainly use the following key tags:
archiveList: This is the core of the content list, used to query and display various documents such as articles, products, and other documents. When ittypethe parameter to"page"it will also prepare the data required for pagination at the same time.pagination: This is a label specifically used for rendering pagination navigation. It will receivearchiveListGenerated pagination data and convert it into user-friendly links such as 'Previous page', 'Next page', 'Page number', etc.forLoop withemptyblock:forLoop used for traversalarchiveListThe returned document collection. Its unique{% empty %}A block is a tool for handling empty list situations whenforthe loop has no data to iterate over,emptythe content inside the block will be rendered.iflogical judgment:ifTags provide conditional judgment capabilities, allowing us to decide whether to execute a specific code block based on certain conditions.
Core pain point: Why should pagination be hidden?
Imagine a user searches and lands on a results page, only to find no matching content.At this time, it is reasonable for a line sayingBut if there is a pagination bar below with text saying 'Home Previous Page 1 Next Page End Page', it seems very inconsistent and redundant.This not only occupies valuable page space, but may also confuse users, even making them think that the website design is not rigorous.archiveListThe query result is empty, and it is synchronized to hide.paginationIt is an important aspect for improving user experience and optimizing page visuals.
Solution one: skillfully usefor emptyStructural processing of content is missing
AnQiCMS'forLoop tags provide a very convenientemptyblock. WhenarchiveListWhen no content meets the conditions,{% empty %}the code block will start, providing us with an opportunity to elegantly display a 'no content' prompt.
Firstly, we usually write it like thisarchiveListandforLoop to display content:
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="archive-item">
<h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
<p>{{ item.Description }}</p>
<span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</div>
{% empty %}
<div class="no-content-message">
<p>抱歉，未找到任何相关内容。</p>
<p>您可以尝试修改搜索词或浏览其他分类。</p>
</div>
{% endfor %}
{# 默认情况下，pagination标签会紧随其后 #}
<div class="pagination-container">
{% pagination pages with show="5" %}
{# 分页导航的代码，例如： #}
<a href="{{ pages.FirstPage.Link }}">首页</a>
{% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}">上一页</a>{% endif %}
{% for page in pages.Pages %}<a class="{% if page.IsCurrent %}active{% endif %}" href="{{ page.Link }}">{{ page.Name }}</a>{% endfor %}
{% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}">下一页</a>{% endif %}
<a href="{{ pages.LastPage.Link }}">末页</a>
{% endpagination %}
</div>
{% endarchiveList %}
In the above example, ifarchivesis empty, the page will display 'Sorry, no related content was found.' However,paginationThe label will still try to render. To solve this problem, we need to control it more accuratelypaginationat the time of display.
Solution two: precise controlpaginationat the time of display.
WhenarchiveListStart withtype="page"When the pattern runs, it not only providesarchivesa list, but also generates a namedpagesobject that contains all information related to pagination, such as total number of entries(",TotalItems) and total number of pages(}TotalPages) of the current page(CurrentPage) and so on.
Even ifarchiveListThe query result is empty,pagesThe object will still exist, but itsTotalItemsusually will be 0,TotalPagesIt will be 1 (indicating that there is only one page and it is empty). Therefore, we can renderpaginationAdd a conditional judgment before the tag, only when the total number of pages is greater than 1, should the pagination navigation be displayed.
This is the recommended and more perfect approach:
”`twig {# Use archiveList to get document and pagination data #} {% archiveList archives with type=“page” limit=“10” %}
{# 先处理文档列表的显示 #}
{% for item in archives %}
<div class="archive-item">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description }}</p>
<span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</div>
{% empty %}
<div class="no-content-message">
<p>抱歉，未找到任何相关内容。</p>
<p>您可以尝试修改搜索词或浏览其他分类。</p>
</div>
{% endfor %}
{# 接着，在分页导航渲染前，进行条件判断 #}