In AnQiCMS, implementing pagination for website search results is an important feature to enhance user experience and optimize the website structure.AnQiCMS powerful template tag system makes this process intuitive and efficient.archiveListandpaginationWith these core tags, you can easily build a search results page with comprehensive features.
Core Mechanism:archiveListTags and pagination types
AnQiCMS providesarchiveListTags are a core tool used for retrieving and displaying various types of content on a website, including search results. When we need to implement pagination on the search results page, we just need toarchiveListsetting in the labeltype="page"Parameters. The setting of this parameter,archiveListNot only will it return a list of documents that meet the conditions, but it will also automatically handle the data required for pagination, laying the foundation for subsequent pagination navigation.
The handling of search keywords.archiveListTags are built-in.qParameters. You can directly specify the search term in the template, but a more intelligent and common practice is that when a user submits a keyword through the search form, AnQiCMS will extract the search parameters from the URL (for exampleq=关键词Automatically identify and apply these search conditions without the need to manually retrieve or process them in the template.This makes the content list dynamically adjust according to the user's input keywords while providing an accurate data source for the subsequent pagination feature.
Build a search form
A well-designed search form is required for a functional search feature.In AnQiCMS, the design of this form is identical to a conventional HTML form, the key lies in the settings of several core properties.
First,methodthe properties should be set to"get"to ensure that the search request is sent in GET mode, so that the keywords can be passed through the URL. Next,actionProperties usually point to the system's search page path, for example"/search". The most important thing is, the search keyword input box'snameproperty must be set to"q"This is the field name that AnQiCMS defaults to recognize search terms, ensuring that the system can correctly obtain the search terms entered by the user.
The following is an example of a typical search form:
<form method="get" action="/search">
<div>
<input type="text" name="q" placeholder="请输入搜索关键词" value="{{urlParams.q}}">
<button type="submit">搜索</button>
</div>
</form>
In this example,value="{{urlParams.q}}"The use can ensure that the previously entered keywords are still displayed in the search box after the user submits the search, enhancing the user experience.
Display the search results list
The display of search results usually occurs in specialized template files. According to the AnQiCMS template conventions, the system defaults to searching for/templatethe directory.search/index.htmlFile. All your search result display logic should be centralized in this file.
In this template, we will again applyarchiveListTag to retrieve and render documents that match the search conditions. Combined with what was mentioned earlier.type="page"parameters,archiveListIt will return a document list containing pagination information.limitThe parameter is used to control how many search results are displayed per page.
Passforto iteratearchivesVariable, we can display the title, description, link and other information of each search result one by one. If the current search result is empty,{% empty %}The content within the tag will provide a friendly prompt.
The following is an example code snippet showing a list of search results:
<div>
{% archiveList archives with type="page" limit="10" %} {# q参数无需手动指定，系统会从URL自动获取 #}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<div>{{item.Description}}</div>
<div>
<span>{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>{{item.Views}} 阅读</span>
</div>
</a>
{% if item.Thumb %}
<a href="{{item.Link}}">
<img alt="{{item.Title}}" src="{{item.Thumb}}">
</a>
{% endif %}
</li>
{% empty %}
<li>
很抱歉，没有找到与您搜索关键词相关的结果。
</li>
{% endfor %}
{% endarchiveList %}
</div>
Implement elegant pagination navigation
After displaying the search result list, pagination navigation is an indispensable part to facilitate users to browse more results. AnQiCMS providespaginationtags, which can intelligently identify based onarchiveListTag returns the pagination data, automatically generates complete page navigation.
paginationTags usually return apagesAn object that contains information such as the home page, previous page, next page, last page, and an array of middle page numbers. You can use this information to flexibly construct pagination links.
showThe parameter allows us to control the number of page numbers displayed in the middle page area. For example,show="5"it will display 5 page numbers around the current page to help users quickly locate. By traversingpages.Pagesthe array, combiningitem.IsCurrentAttributes that can highlight the current page number, providing a clear navigation experience.
The following is a typical code example of 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 following these steps, your AnQiCMS website will have a fully functional and user-friendly search result pagination display. This not only enhances the browsing experience of users on the website but also helps search engines