AnQi CMS is an efficient and customizable enterprise-level content management system that provides great flexibility in content display.For website operators, how to intelligently manage and present page content, ensuring that users have a **good experience while also considering SEO-friendliness, is a fine consideration in daily work.Today, let's delve into a common requirement: how to implement pagination navigation in AnQiCMS only when the page number exceeds a predefined threshold (X)?
Understand the pagination mechanism of AnQiCMS
In AnQiCMS, the implementation of the pagination function is inseparable from its powerful template tag system, especiallyarchiveList(or other content list tags liketagDataList/commentList) andpaginationLabel collaboration. When we call in the templatearchiveListand settype="page"the system will automatically handle the data pagination logic, and pack the relevant pagination data intopagesan object for subsequent usepaginationlabel usage
ThispagesThe object is very crucial, it contains all the pagination information of the current list, for example:
pages.TotalItemsTotal number of entries in the list.pages.TotalPagesTotal number of pages in the list.pages.CurrentPage: The current page number.pages.FirstPage/pages.LastPage/pages.PrevPage/pages.NextPageThe detailed information of the first page, last page, previous page and next page, including links and names.pages.PagesAn array containing all the middle page numbers for easy looping rendering.
It is precisely by processingpages.TotalPagesThe judgment of this variable, we can realize the display control of intelligent pagination navigation.
Why do we need to hide pagination intelligently?
You might ask, why not just show the pagination navigation directly? There are several practical considerations behind this:
FirstlyUser Experience.When a content list has only one page or a few pages, displaying a full pagination navigation (including home page, end page, previous page, next page, and middle page numbers) may seem redundant and even may distract the user's attention.Hide unnecessary pagination, which can make the page look cleaner, allowing users to focus more on the content itself.
Next isPage aesthetics and design simplicity.Modern web design advocates for 'less is more,' too many UI elements may disrupt the overall visual balance.Smartly hide pagination, which helps keep the page clean, especially on mobile devices where every pixel counts and efficient use is needed.
Furthermore, fromSEO optimizationFrom this perspective, although AnQiCMS does well in pseudo-static and 301 redirect management, avoiding the generation of too many low-value duplicate pagination links helps to concentrate page authority and make search engines focus more on core content.When the amount of content is small, all the content is displayed on a single page, and there is no need to distribute weight to extra pagination links.
Implement page navigation in AnQiCMS only when the page number exceeds X
To achieve this feature, we need to cleverly combinearchiveListtags,paginationtags and conditional judgments{% if ... %}.
First, you need to perform operations in a content list page template (such as an article list page, product list page, or tag document list page). Suppose you are editing a template used to display an article list, which is usually located in/template/{您的模板目录}/archive/list.htmlor in a similar path.
First step: call the content list and prepare pagination data
You first need to usearchiveListtags to get the list of articles. The key is to settype="page"This way, AnQiCMS will generate it for uspagespagination object.
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="article-item">
<a href="{{item.Link}}">
<h3>{{item.Title}}</h3>
<p>{{item.Description|truncatechars:100}}</p>
<span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
</a>
</div>
{% else %}
<p>抱歉，该分类下暂无文章内容。</p>
{% endfor %}
{% endarchiveList %}
Please note,archiveListThe tag itself will complete the data query, and will return the results (archives) and pagination metadata (implicitly aspagesThe object is passed to the subsequent template rendering.
Step two: Use conditional judgment to control the display of pagination navigation
ThenarchiveListBelow the label, you can use{% if ... %}Conditional judgment to checkpages.TotalPages.The value of 'X' here is the page threshold you hope for.For example, if you want pagination to be displayed only when the total number of pages exceeds 1, then X is 1; if you want pagination to be displayed only when the total number of pages exceeds 2 (i.e., there are 3 or more pages), then X is 2.
We take the example of "pages over 1 page show pagination":
{% if pages.TotalPages > 1 %}
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul class="pagination-list">
{# 首页 #}
<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>
</ul>
{% endpagination %}
</div>
{% endif %}
In this code block,{% if pages.TotalPages > 1 %}is the core of intelligent display. When the total number of pages is greater than 1 (i.e., there are 2 or more pages), the wholepagination-containerAn area along with its internal pagination navigation will be rendered on the page; otherwise, if there is only 1 page of content, this area will not be displayed at all, keeping the page concise. You can adjust it according to your actual needs.1Replace with another number, for examplepages.TotalPages > 2.
In this way, you can not only accurately control the timing of displaying pagination navigation, but also provide a smoother user experience and optimized page structure when there is less content on the page.
What time**practice and consideration
- Choose the appropriate X valueFor most websites, setting X to 1 (i.e., when the page number is greater than 1) is a good starting point.This means that the user will only see pagination navigation when the content is indeed so long that it needs to be paginated.If your content list is usually long, or you want to further streamline, you can also try setting X to 2 or 3.
- Maintain consistencyOnce a certain X value is determined, it is recommended to maintain consistency across all paginated list pages on the entire website to avoid confusion during user interaction.
- Provide users with clear feedback.When the pagination is hidden, it usually means that all the content is already displayed on the current page. If needed, you can click on the list's
{% else %}Within the block, or when the pagination conditions are not met, add a prompt, such as 'All content is displayed on the current page', to avoid users mistakenly thinking there is missing content. - CSS style adaptationEven if pagination is dynamically displayed, the CSS styles of the container and internal elements need to be designed in advance to ensure that the page layout remains stable and beautiful regardless of whether it is displayed or not.
Conclusion
AnQiCMS with its high-performance architecture based on the Go language and flexible template system, provides content operation with