Optimizing the search results page of the website, making it not only accurately present information but also intelligently sort according to user preferences, is a key link to improving user experience and website efficiency.AnQi CMS provides a powerful and flexible template engine and a rich tag library, making it intuitive and efficient to customize the display logic and content sorting of search result pages.
In the Auto CMS, the search results page is usually controlled by a specific template file, which is located by default in the directory of the template theme you are currently using.search/index.html(or flattened mode)search.html）。To customize the display of search results, we will mainly focus on this template file and the built-in template tags of Anq CMS.
Understand the search mechanism of Anq CMS
When a user performs a search on your website, they usually visit a URL similar to/search?q=关键词The Safe CMS will analyze keywords in the URL (qParameters search related content, and pass this content and other page information tosearch/index.htmltemplate for rendering.
this process,archiveListThe template tags are the key to obtaining core data from search results. They can filter and sort content based on various conditions and are the foundation for customizing the display logic and sorting rules of search result pages.
Customize Search Results Page Display Content
First, you need to find and editsearch/index.htmlThe template file. In this file, you will see the code used to loop through and display the search resultsarchiveListTags andforLoop.
An basic search results list may look like this:
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="search-result-item">
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
<p>{{item.Description|truncatechars:150}}</p>
<div class="meta-info">
<span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>浏览量：{{item.Views}}</span>
</div>
{% if item.Thumb %}
<a href="{{item.Link}}">
<img alt="{{item.Title}}" src="{{item.Thumb}}">
</a>
{% endif %}
</div>
{% empty %}
<p>抱歉，没有找到与“{{urlParams.q}}”相关的结果。</p>
{% endfor %}
{% endarchiveList %}
In the above code:
{% archiveList archives with type="page" limit="10" %}This line of code tells the system to get the document list, and display it in pages (type="page") with 10 items per page (limit="10") results.archivesis a variable that contains all the document data that meets the conditions. On the search results page, it automatically captures the URL in.qto search.{% for item in archives %}Loop through:archiveseach document record.{{item.Title}}/{{item.Link}}/{{item.Description}}These are document objects:itemThe attributes of the document can be displayed as per your requirements, such as the title, link, abstract, thumbnail, and other information.|truncatechars:150：This is a filter that truncates the summary content to no more than 150 characters and automatically adds an ellipsis at the end to keep the page tidy.{% categoryDetail with name="Title" id=item.CategoryId %}：Through the document'sCategoryIdGet and display the name of its category.{{stampToDate(item.CreatedTime, "2006-01-02")}}: This is a label for a formatted timestamp, converting the document creation time to a readable date format.{% empty %}：When no search results are found, this part of the content will be displayed to enhance user experience.{{urlParams.q}}：Directly obtain the current search keyword from the URL, used to prompt the user when there are no results.
Additionally, you can display any custom field of the document, just byarchiveDetailspecifying the field name in the tag, or byarchiveParamscyclically displaying all custom parameters.
optimizing the content sorting logic
The sorting method of search results directly affects the efficiency of users finding the information they need. Anqi CMS'sarchiveListTags provide flexibleorderparameters allow you to easily control the sorting of content.
By default, search results may be sorted in descending order by ID (latest release), but you can adjust it according to your business needs. For example, if you want to sort by the number of views in descending order, you canarchiveListtag.order="views desc":
{% archiveList archives with type="page" limit="10" order="views desc" %}
{# ... 循环显示搜索结果 ... #}
{% endarchiveList %}
Common sorting methods include:
id desc：By document ID in descending order (usually the latest released first).id asc：By document ID in ascending order (usually the oldest released first).views desc：By views in descending order (popular content first).views asc：By view count in ascending order.sort desc：By custom sorting field in descending order on the backend.
Further, you can also provide users with sorting options.This is usually achieved by adding a dropdown menu or button group to the page.&order=views_desc）。Then inarchiveListtags, you can dynamically read this URL parameter to setorder.
{# 假设您在URL中通过参数 'sort_by' 传递排序方式 #}
{% archiveList archives with type="page" limit="10" order="{{urlParams.sort_by|default:'id desc'}}" %}
{# ... 循环显示搜索结果 ... #}
{% endarchiveList %}
You need to provide a sorting selection UI on the page, for example:
<select onchange="window.location.href = updateQueryStringParameter(window.location.href, 'sort_by', this.value);">
<option value="id desc" {% if urlParams.sort_by == 'id desc' or not urlParams.sort_by %}selected{% endif %}>最新发布</option>
<option value="views desc" {% if urlParams.sort_by == 'views desc' %}selected{% endif %}>热门浏览</option>
</select>
<script>
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
} else {
return uri + separator + key + "=" + value;
}
}
</script>
After the user makes a selection, the page will refresh automatically and display the results according to the new sorting rule.
Enhance the search results display logic: Filter and classify
In addition to sorting, users