Manage website content in Anqi CMS, whether it's blog articles, product displays, or news information, efficient list display is indispensable.When the amount of content gradually increases, how to elegantly present a large number of documents and ensure that users can easily browse and search has become a focus for operators. At this time,archiveListThe tag and its page function have become a powerful tool in our hands, it can not only implement pagination of ordinary document lists, but also be applied flexibly to the display of related documents and search results.
Document list pagination display
Imagine that your website has a "Latest Articles" or "Product Center" page that contains hundreds or even thousands of items.If there is no pagination, users may need to scroll endlessly to find the information they want, which undoubtedly will greatly affect the user experience.AnQi CMS'sarchiveListTags, which are born to solve this problem
To implement document list pagination display, we mainly usearchiveListlabel'stype="page"The parameter tells the system that we want to retrieve a paginated collection of documents. At the same time,limitThe parameter is used to set how many documents are displayed per page, for example,limit="10"indicating that 10 documents are displayed per page.
This code snippet shows how to retrieve and display a list of documents under a category in a template, along with pagination functionality:
{# 假设我们想显示分类ID为1的文章列表，每页显示10条 #}
<div>
{% archiveList archives with type="page" categoryId="1" limit="10" order="id desc" %}
{% for item in archives %}
<div class="document-item">
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
<p>{{item.Description}}</p>
<small>发布于: {{stampToDate(item.CreatedTime, "2006-01-02")}} | 浏览量: {{item.Views}}</small>
{% if item.Thumb %}
<a href="{{item.Link}}"><img src="{{item.Thumb}}" alt="{{item.Title}}"></a>
{% endif %}
</div>
{% empty %}
<p>当前分类下暂时没有文档。</p>
{% endfor %}
{% endarchiveList %}
{# 分页导航区域，通常紧跟在文档列表之后 #}
<div class="pagination-controls">
{% pagination pages with show="5" %}
{# 显示“首页”链接 #}
<a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
{# 显示“上一页”链接（如果存在） #}
{% if pages.PrevPage %}
<a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
{% endif %}
{# 循环显示中间的页码链接，例如：1 2 3 4 5 #}
{% for item in pages.Pages %}
<a class="{% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
{% endfor %}
{# 显示“下一页”链接（如果存在） #}
{% if pages.NextPage %}
<a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
{% endif %}
{# 显示“尾页”链接 #}
<a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
{% endpagination %}
</div>
</div>
In this code block,archiveListResponsible for retrieving data,archivesThe variable contains all the document data on the current page, and we display it byforloop traversal. Whilepaginationthe tag is responsible for generating page navigation,pagesThe variable provides information such as total number of pages, current page, first page, last page, previous page, next page, and middle page numbers, allowing you to flexibly build various styles of pagination bars.show="5"The parameter controls the maximum number of middle page links displayed. In addition, you can alsomoduleIdspecify a content model (such as articles or products), or useorderParameters such asorder="views desc"Sort by view count to refine the document filtering and sorting.
Elegant presentation of the related document list
After a user reads an excellent article, they will naturally want to see more related content. In Anqi CMS,archiveListTags can also help us achieve this, but here it is usually not pagination, but displaying a fixed number of related document lists.
To get related documents, we willarchiveListoftypethe parameter to"related". The system will intelligently recommend the most relevant content based on the current document's keywords or categories.limitParameters are particularly important here, as they directly control the number of related documents displayed.
Here is an example of displaying related articles on the document detail page.
{# 假设这是在文档详情页的模板中 #}
<div class="related-documents">
<h3>相关推荐</h3>
<ul>
{% archiveList archives with type="related" limit="5" %} {# 获取最多5条相关文档 #}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<img src="{{item.Thumb}}" alt="{{item.Title}}">
<span>{{item.Title}}</span>
</a>
</li>
{% empty %}
<li>暂无相关文档。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
In this scenario, we usually do not paginate related documents, but instead display a curated small list.limit="5"Ensure the page layout is simple and not disturbed by too much content. You can also try to control the related logic more accurately if you wish.like="keywords"Or based on keyword matchinglike="relation"(Only shows documents manually associated in the background).
Pagination implementation on the search results page.
Your website content is getting richer and richer. How can users quickly find the information they need? An efficient search function is indispensable. Anqi CMS'sarchiveListThe tag can also perfectly handle the display and pagination of search results.
On the search results page,archiveListThe tag is also usedtype="page"to enable pagination. The key is to introduceqA parameter, it will match the document title based on the user's input keyword. When the user submits a query in the search box, the page URL usually includesq=关键词such a parameter,archiveListThe URL parameter will automatically be read to perform a search.
First, you need a search form:
<form method="get" action="/search"> {# 假设搜索结果页的URL是/search #}
<input type="text" name="q" placeholder="请输入搜索关键词" value="{{urlParams.q}}"> {# value="{{urlParams.q}}"用于保留搜索框中的关键词 #}
<button type="submit">搜索</button>
</form>
Next, in/searchPage (or the search result template file you define), you can display the search results like this and implement pagination:
`twig
<h3>搜索结果: {{urlParams.q}}</h3>
{% archiveList archives with type="page" limit="10" %} {# 这里不需要显式指定q，因为它会从URL中自动读取 #}
{% for item in archives %}
<div class="search-result-item">
<h4><a href="{{item.Link}}">{{item.Title}}</a></h4>
<p>{{item.Description}}</p>
<small>分类: {% categoryDetail with name="Title" id=item.CategoryId %}</small>
</div>
{% empty %}
<p>抱歉，没有找到与“{{urlParams.q}}”相关的文档。</p>
{% endfor %}
{% endarchiveList %}
{# 搜索结果的分页与普通列表分页相同 #}
<div class="pagination-controls">
{% pagination pages with show="5" %}
<a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
{% if pages.PrevPage %}
<a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name