In AnQi CMS,archiveListLabels are undoubtedly the core tool for content display, providing great flexibility and control for the website's content list. Whether you want to display the latest articles on the homepage or implement complex filtering and pagination on the category page,archiveListCan help us accurately present content through its rich parameter configuration.Next, let's delve into how to use this tag to control the display quantity, sorting method, and implement exquisite pagination logic for the document list.
Control the number of documents displayed:limitFlexible use of parameters
When building a website page, we often need to control the length of the content list.For example, on the homepage of the website, you may only want to display the latest 5 articles;In the sidebar, maybe just show the top 10 products.archiveListTag throughlimitThe parameters have given us the ability to accurately control the display quantity.
The most common usage is to specify a number directly, indicating the number of documents to retrieve. For example, if you want to display the most recent 8 articles at a certain location:
{% archiveList latestArticles with type="list" limit="8" %}
{% for item in latestArticles %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% empty %}
<li>暂无文章可显示。</li>
{% endfor %}
{% endarchiveList %}
here,limit="8"It ensured that the list only displays a maximum of 8 articles.
limitThe parameter also supports a more advanced "offset" mode, which starts from a certain position in the result set and then retrieves a specified number of documents.This is very useful for the scenario where you need to skip the previous content (such as after the headline recommendation and display the normal list)Its format is"起始偏移量,获取数量"For example, if you want to skip the first 2 articles and display 5 articles starting from the 3rd one:
{% archiveList featuredArticles with type="list" limit="2,5" %}
{% for item in featuredArticles %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a> - 从第三篇开始的第{{ forloop.Counter }}篇</li>
{% empty %}
<li>暂无文章可显示。</li>
{% endfor %}
{% endarchiveList %}
This configuration makes content display more refined, meeting various layout needs.
Customize content sorting method:orderParameter strategy selection
The presentation order of content is crucial for user experience and information delivery.archiveListTag throughorderParameters allow you to flexibly define the sorting method of the document to highlight the most important information.
orderThe parameter accepts a string containing the field to be sorted and the sorting direction (ascfor ascending,descfor descending.). Common sorting fields include:
id desc: Arrange documents in descending order by document ID, which usually means they are displayed from the most recent to the oldest.views desc：The documents are sorted in descending order of page views, which helps us show the most popular or hottest content.sort desc: Sort by the custom sorting field in descending order. If the manual sorting weight is set for the document in the background, this option will be very practical.
For example, if you want to display the top 5 articles with the highest reading volume in the sidebar:
<div class="sidebar-hot-articles">
<h3>热门文章</h3>
<ul>
{% archiveList hotArticles with type="list" order="views desc" limit="5" %}
{% for item in hotArticles %}
<li><a href="{{ item.Link }}">{{ item.Title }} <small>({{ item.Views }} 阅读)</small></a></li>
{% empty %}
<li>暂无热门文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
And if you want to display the latest content on the category page, you can use it like this:
<div class="category-new-list">
<h2>最新发布</h2>
<ul>
{% archiveList newArrivals with type="list" order="id desc" limit="10" %}
{% for item in newArrivals %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a> - 发布于 {{ stampToDate(item.CreatedTime, "2006-01-02") }}</li>
{% empty %}
<li>此分类暂无最新文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
By cleverly pairingorderParameters, we can ensure that the content of the website is always presented to the user in the most reasonable and attractive way.
Implement content pagination logic:type="page"withpaginationTag联动
When the amount of content on a website is large, pagination is an essential feature that can effectively improve page loading speed and user browsing experience. In Anqi CMS, implementing pagination requiresarchiveListwith the tag andpaginationThe clever combination of tags.
First, inarchiveListIn the tags, we need to shift.typethe parameter to"page"This will tell the system that we want to get a paged document list, not a fixed-length list. At this point,limitThe parameter will be used to define the number of documents displayed per page.
For example, to display 10 articles per page on the article list page:
{% archiveList articles with type="page" limit="10" %}
<div class="article-list">
{% for item in articles %}
<article>
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description }}</p>
<span>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</article>
{% empty %}
<p>此列表暂无内容。</p>
{% endfor %}
</div>
{% endarchiveList %}
Just setting this up, the page will not automatically display page navigation. At this point, you needpaginationThe tag has appeared.paginationthe tag to readarchiveListthe prepared pagination data and generate the actual page navigation links. It is usually placedarchiveListBelow the label, and wrapped in a{% pagination pages with show="5" %}...{% endpagination %}structure. Among them,show="5"it means that up to 5 page number buttons are displayed (such as 1, 2, 3, 4, 5).
An example of a complete pagination list and page navigation is as follows:
{# 假设这是文章列表页模板 #}
<div class="main-content">
{% archiveList articles with type="page" limit="10" order="id desc" %}
<div class="article-list">
{% for item in articles %}
<article>
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description }}</p>
<span>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</article>
{% empty %}
<p>此列表暂无内容。</p>
{% endfor %}
</div>
{# 分页导航区域 #}
<div class="pagination-nav">
{% pagination pages with show="5" %}
<ul>
{# 首页按钮 #}
<li {% if pages.FirstPage.IsCurrent %}class="active"{% endif %}><a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a></li>
{# 上一页按钮 #}
{% if pages.PrevPage %}
<li><a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a></li>
{% endif %}
{# 中间页码按钮组 #}
{% for pageItem in pages.Pages %}
<li {% if pageItem.IsCurrent %}class="active"{% endif %}><a href="{{ pageItem.Link }}">{{ pageItem.Name }}</a></li>
{% endfor %}
{# 下一页按钮 #}
{% if pages.NextPage %}
<li><a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a></li>
{% endif %}
{# 尾页按钮 #}
<li {% if pages.LastPage.IsCurrent %}class="active"{% endif %}><a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a></li>
<li class="info">总数：{{ pages.TotalItems }}条，共：{{ pages.TotalPages }}页，当前第{{ pages.CurrentPage }}页</li>
</ul>
{% endpagination %}
</div>
{% endarchiveList %}
</div>
In this example,pagesThe variable contains all information related to pagination, such as the current page number (pages.CurrentPage), total number of pages (pages.TotalPages), and previous page link (pages.PrevPage.Link）and a series of middle page number buttons（pages.Pages）。By traversingpages.Pages，we can generate a complete page navigation bar.
It is worth mentioning that whentype="page"enabled，archiveListWill automatically recognize URLs inqParameter