When building a website using AnQiCMS, it is particularly important to have reasonable pagination navigation when you need to display a large amount of content, such as article lists, product lists, etc.It not only enhances user experience, making it easier for visitors to browse and find content, but also helps search engines better crawl the website.AnQi CMS provides a very intuitive and powerful pagination tag, making it easy to display the pagination of content lists.
Step 1: Prepare content list data
To implement pagination of the content list, first you need to usearchiveListThe tag is used to retrieve data. This tag is the core used to call various types of document lists in Anqí CMS.The key is that we need to clearly inform the system that this list needs to be paginated, rather than loaded all at once.
To this end, when usingarchiveListtags, you need totypethe parameter to"page". At the same time, throughlimitParameters to specify how many items to display per page. For example, if you want to display 10 articles per page under the current category, you can set it like this:
{% archiveList archives with type="page" limit="10" %}
{# 循环显示文章内容 #}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<p>{{item.Description}}</p>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
</a>
</li>
{% endfor %}
{% endarchiveList %}
Here, archivesIt is a custom variable name that contains all the article data on the current page. The followingforThe loop will iterate through these data, displaying the title, link, summary, and publish date of each article.
Step two: introduce pagination tags and build navigation.
InarchiveListThe tag retrieves and displays the content of the current page, and then it can introduce the Anqi CMS pagination tagpaginationIt generates the pagination navigation. This tag is usually placed inarchiveListclosing tag.
paginationA label needs a variable to store pagination information, usually we name itpages。“Furthermore，”showThe parameter is very practical, it determines how many page number buttons can be displayed at the same time in pagination navigation, for exampleshow="5"this means that up to 5 page number buttons are displayed.
The pagination tag provides a series of built-in objects and properties to help us build a complete navigation structure, including:
pages.TotalItemsTotal number of contents:pages.TotalPages: Total number of pages.pages.CurrentPage: The current page number.pages.FirstPage/pages.LastPageAn object pointing to the first and last pages.pages.PrevPage/pages.NextPage: Points to the object of the previous and next pages.pages.Pages: An array containing all the middle page number information, which can be accessed through.forLoop to traverse and display.
Each page number object (for example)pages.FirstPageorpages.Pagesofitem) all containName(Page display name),Link(Page link) andIsCurrent(Whether it is the current page, used for highlighting) and other properties.
Here is a general example of building a pagination navigation:
<div>
{% pagination pages with show="5" %}
<ul>
{# 显示总数和当前页信息 #}
<li>总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
{# 第一页按钮 #}
<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>
By the above code, you will get a fully functional pagination navigation that includes the first page, previous page, next page, last page, as well as the page number links in the middle, and the current page will haveactiveStyle class for highlighting.
Complete example: article list and pagination navigation
Combine these two steps and you can easily implement pagination navigation display of content lists in Anqi CMS.
<div class="article-list-container">
{# 第一步：获取需要分页的文章列表数据 #}
{% 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}}</p>
<small>发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}}</small>
</a>
</div>
{% empty %}
<p>该分类下暂时没有文章。</p>
{% endfor %}
{% endarchiveList %}
{# 第二步：生成分页导航 #}
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul class="pagination-nav">
<li class="pagination-info">总计：{{pages.TotalItems}}条，共{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
<li class="page-link-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
</li>
{% if pages.PrevPage %}
<li class="page-link-item"><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
{% endif %}
{% for item in pages.Pages %}
<li class="page-link-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{item.Link}}">{{item.Name}}</a>
</li>
{% endfor %}
{% if pages.NextPage %}
<li class="page-link-item"><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
{% endif %}
<li class="page-link-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
</ul>
{% endpagination %}
</div>
</div>
By using these simple tag combinations, Anqi CMS can help you quickly add pagination features to website content, whether it's articles, products, or other custom content models, which can be easily realized, greatly enhancing the practicality and user experience of the website.
Frequently Asked Questions (FAQ)
1. Why is the pagination navigation not displayed on my content list page?
Generally speaking, this may be because when usingarchiveListortagDataListthe content list tags, you have not settypethe parameter to"page". Only whentype="page"When, Anqi CMS will calculate the pagination information and provide it topaginationUse the tag. Also, checklimitWhether the parameters are set properly, if the total number of contents is not enough for a page (i.e., less than or equal tolimitValue), the system will not display pagination navigation.
2. How to adjust the number of items displayed per page?
To adjust the number of items displayed per page, simply modifyarchiveListin the labellimitthe parameter value. For example, tolimit="10"changed tolimit="20"This parameter directly determines the number of items displayed per page and the density of content per page.
3. How is the pagination link URL generated? Can I customize it?
The pagination link URL format of AnQi CMS is automatically generated based on the static rules you configure in the background. For example, if you choose the numeric mode, the link may look like/archive/page-2.htmlThis; if it is a model naming pattern, it may contain the model name. Usually, the default pseudo-static rules can meet most needs. If you need highly customized, you canpaginationUsed in tagsprefixParameters to redefine the URL pattern, but this feature is quite advanced and needs to include{page}Placeholders to indicate the page number location, and make sure it matches the routing rules of your website.