Manage website content in AnQi CMS, whether it's blog articles, product displays, or news information, it can't do without efficient list display.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 key point that operators need to pay attention to.archiveListThe label and its pagination feature have become a powerful tool in our hands, it can not only realize the pagination of conventional document lists, but also can be flexibly applied 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, which contains hundreds or even thousands of items.If there is no pagination, users may need to endlessly scroll to find the information they want, which will undoubtedly greatly affect the user experience.archiveListTags, which are born to solve this problem.
To implement the pagination display of the document list, we will mainly usearchiveListTagstype="page"The parameter. This parameter tells the system that we want to get a paged document collection. At the same time,limitThe parameter is used to set how many documents are displayed per page, for example,limit="10"It means 10 documents are displayed per page.
The following code snippet demonstrates how to obtain 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,archiveListResponsible for obtaining data,archivesThe variable contains all the document data of the current page, we traverse through it tofordisplay it in a loop.paginationThe 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 as)order="views desc"Sorted by views) to refine and sort documents more precisely.
Elegant presentation of the list of related documents
When a user finishes reading an excellent article, they naturally want to see more related content. In Anqi CMS,archiveListLabels 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 willarchiveListoftypeparameter settings"related"The system will intelligently recommend the most relevant content based on the keywords or categories of the current document.limitParameters are particularly important here, as they directly control the number of 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 the relevant documents but display a curated list.limit="5"Ensure the page layout is simple and not disturbed by too much content. If you want to control the related logic more precisely, you can also trylike="keywords"(Matched according to keywords) orlike="relation"(Only display documents manually associated in the background).
Page implementation on the search results page.
Your website content is getting richer, how can users quickly find the information they need? An efficient search function is indispensable. Anqi CMS'sarchiveListLabels can also perfectly handle the display and pagination of search results.
On the search results page,archiveListLabels also usetype="page"to enable pagination. The key is to introduceqThe parameter, it will match the document title based on the user's input keywords. After the user submits the query in the search box, usually the page URL will containq=关键词such a parameter,archiveListIt will automatically read this URL parameter to search.
Firstly, 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>
Then, in/searchPage (or the search result template file you define), you can display search results and implement pagination like this:
`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