AnQiCMS (AnQiCMS) boasts its efficient architecture based on the Go language and flexible template system, providing powerful customization capabilities for content operators. Pagination is a very common requirement in the presentation of website content, and ourpaginationThe label is born for this. It not only helps you easily build standard pagination navigation, but also providesTotalPagesThis valuable attribute allows you to break free from the constraints of traditional pagination and achieve more intelligent and complex page jump logic.
Today, let's delve into how to cleverly utilizepaginationTotal number of tags returnedTotalPagesTo provide your website visitors with an excellent navigation experience.
Deep understandingpaginationwith the tag andTotalPages
When developing templates in AnQi CMS, when we need to display list content and support pagination, we usually combinearchiveList(or other content list tags) andpagination.archiveListresponsible for fetching pagination data, andpaginationthen generates pagination links based on this data.
{# 假设我们已经通过 archiveList 标签获取了文章列表并指定了 type="page" #}
{% archiveList archives with type="page" limit="10" %}
{# 这里是文章列表的循环渲染部分 #}
{% for item in archives %}
<p><a href="{{item.Link}}">{{item.Title}}</a></p>
{% endfor %}
{% endarchiveList %}
{# 接着使用 pagination 标签生成分页导航 #}
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul>
{# 首页链接 #}
<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 %}
{# 中间页码链接 #}
{% 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 %}
{# 末页链接 #}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
<li>总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
</ul>
{% endpagination %}
</div>
in thispaginationin the tag block,pagesis an object that contains all pagination information. Among them,pages.TotalPagesIt is the focus we are concerned about—it stores the total number of pages in the current content list.With this number, we can make flexible conditional judgments in the template, thereby realizing more advanced interactive logic.
UtilizeTotalPagesimplement more complex page jump logic
1. The intelligent 'Jump to Last Page' button: Improves navigation efficiency in long lists
When the number of pages in the content list is very large, users may want to jump directly to the last page instead of clicking through 'next page' or middle page numbers.However, if the total number of pages is very few, there is no need to display this 'go to the last page' button, and it may even seem redundant.TotalPagesIt can be put to use.
We can set a threshold, for example, only display the option to 'jump to the last page' when the total number of pages exceeds 10.
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul>
{# ... 标准分页导航部分 ... #}
<li>总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
{# 仅当总页数大于10且不在最后一页时，显示“跳转到末页”按钮 #}
{% if pages.TotalPages > 10 and pages.CurrentPage < pages.TotalPages %}
<li class="page-item jump-to-end">
<a href="{{pages.LastPage.Link}}">跳转到末页({{pages.TotalPages}})</a>
</li>
{% endif %}
</ul>
{% endpagination %}
</div>
This allows users to quickly reach the end of the page when browsing deep pages on your website with a single click, greatly enhancing the user experience.For lists with few pages, this button will intelligently hide, keeping the page clean.
2. Simplify pagination display on low-traffic pages: optimize the user interface
For lists with only a small amount of content, such as only one or two pages, a full page navigation may seem too cumbersome.In this case, we may want to completely hide pagination or only show a simple prompt.
<div class="pagination-container">
{% pagination pages with show="5" %}
{% if pages.TotalPages > 1 %}
{# 当总页数大于1时，显示完整的或简化的分页导航 #}
<ul>
{# ... 标准分页导航部分 ... #}
<li>总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
</ul>
{% else %}
{# 只有一页或没有内容时，显示友好提示，不显示分页 #}
<p>内容不多，无需分页。</p>
{% endif %}
{% endpagination %}
</div>
By such condition judgment, you can dynamically adjust the visibility of the pagination component based on the actual number of contents, keeping the user interface simple and efficient.
3. To achieve precise jump based on user input: Meets the needs of advanced users
For some data-intensive or professional websites, users may be accustomed to directly entering the page number to jump. At this time,TotalPagesit becomes the key to verify the validity of the user's input.
We can add an input box that allows users to manually enter the page number and combine it with JavaScriptTotalPagesto perform client-side validation.
`twig
{% pagination pages with show="5" %}
{# ... 标准分页导航部分 ... #}
<ul>
<li>总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
</ul>
<div class="page-jump-input">
<form onsubmit="jumpToPage(event, {{pages.TotalPages}})">
<label for="pageNumInput">前往第</label>
<input type="number" id="pageNumInput" name="page"
min="1" max="{{pages.TotalPages}}"
value="{{pages.CurrentPage}}"
placeholder="页码">
<label for="pageNumInput">页</label>
<button type="submit">确定</button>
</form>
</div>
{% endpagination %}