Optimize the search results page of the website so that it can not only accurately present information but also intelligently sort according to user preferences, which is a key link to improving user experience and website efficiency.AnQi CMS provides a powerful and flexible template engine and a rich set of tags, making it intuitive and efficient to customize the display logic and content sorting of search result pages.
In AnQi 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 using.search/index.html(or in the case of flat mode'ssearch.html). To customize the display of search results, we will mainly focus on this template file and the built-in template tags of Anqi CMS.
Understand the search mechanism of Anqi CMS.
When a user performs a search on your website, they will usually visit a URL similar to/search?q=关键词. Anqi CMS will analyze the keywords in the URL (qSearch for relevant content and pass this content along with other page information tosearch/index.htmlto render the template.
during this process,archiveListTemplate tags are the key to obtaining core search results. They can filter and sort content based on various conditions and are the basis for customizing the display logic and sorting rules of the search results page.
Custom 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 display the search resultsarchiveListTags andforLoop.
A 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 code above:
{% archiveList archives with type="page" limit="10" %}: This line of code tells the system to get the document list and display it in the form of pagination (type="page"), showing 10 results per page (limit="10").archivesis a variable that contains all the document data that meets the conditions. On the search results page, it will automatically capture the URL inqsearch with the keywords.{% for item in archives %}: Loop through.archiveseach document record.{{item.Title}}/{{item.Link}}/{{item.Description}}Equal: These are document objects (item) properties, you can display the title, link, summary, thumbnail information of the document as needed.|truncatechars:150This is a filter used to truncate the content of the profile description to no more than 150 characters, and automatically add an ellipsis at the end to keep the page neat.{% 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 formatted timestamp label, converting the document creation time to a readable date format.{% empty %}When there are no search results, this part of the content will be displayed to enhance user experience.{{urlParams.q}}Directly obtain the current search keyword from the URL to prompt the user when there are no results.
In addition, you can display any custom fields of the document, just by specifying the field name in thearchiveDetailtag, or by looping through all custom parameters.archiveParamsto display all custom parameters.
Optimize 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, allowing you to easily control the sorting of content.
By default, search results may be sorted in descending order by ID (newest first), but you can adjust according to your business needs. For example, if you want to sort by views in descending order, you canarchiveListthe tag withorder="views desc":
{% archiveList archives with type="page" limit="10" order="views desc" %}
{# ... 循环显示搜索结果 ... #}
{% endarchiveList %}
Common sorting methods include:
id desc: Sorted in descending order by document ID (usually the most recent release is prioritized).id asc: Sorted in ascending order by document ID (usually the oldest release time is prioritized).views desc：By view count in descending order (popular content first).views asc：By view count in ascending order.sort desc：By custom sorting field in descending order.
Further, you can also provide users with sorting options. This is usually achieved by adding a dropdown menu or button group to the page.When the user selects a different sorting method, the page will reload and a sorting parameter will be added to the search URL (for example&order=views_desc）。Then,archiveListIn the tag, 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 %}
At this time, 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 selects, the page will automatically refresh and display the results according to the new sorting rules.
Enhance the search results display logic: filtering and categorization
In addition to sorting, the user