In website operation, the search function is the core to enhance user experience and help users quickly find the information they need.An efficient and intelligent search results page not only meets the immediate needs of users but also effectively guides traffic and enhances the visibility of website content.AnQiCMS provides powerful tools for us, allowing the content display on the search results page to be flexibly dynamically adjusted according to the user's query keywords, thus achieving more accurate and personalized content presentation.
Core Mechanism: Understanding the Search Results Page of AnQiCMS
The search result page of AnQi CMS usually corresponds to the template filesearch/index.htmlIn this template, we mainly use built-in template tags to obtain and display content. The core lies inarchiveListA tag that can dynamically filter out matching documents from the website content library based on different parameters.
When a user submits a search request on the website, the query keywords (usually through the URL) are automatically captured by AnQiCMS.qParameters passed are automatically captured by AnQiCMS.archiveListTags intype="page"Under this mode, it can intelligently utilize thisq[en] Parameters, display the matching documents. This seamless integration allows us to implement powerful search functionality without writing complex backend logic.
[en] Dynamic content display:archiveListThe practical application of tags
To dynamically display content on the search results page,archiveListTags are the key. We will be insearch/index.htmlThis is how we use it in the template:
{% archiveList archives with type="page" limit="10" %}
{# 遍历搜索结果，archives 就是所有匹配到的文档列表 #}
{% for item in archives %}
<div class="search-result-item">
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
<p>{{item.Description}}</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>
</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 that we want to get the document list (archives) and display it in a paginated mode (type="page") with 10 items per page (limit="10"). When the URL containsq=关键词This query parameter is,archiveListwill automatically include these keywords in the search range.{% for item in archives %}: This is traversing all the documents found.itemrepresents each document.{{item.Link}}/{{item.Title}}/{{item.Description}}et al.: These variables are used to display the document's links, titles, summaries, and other basic information. We can also display category names as needed (categoryDetail), publishing time (stampToDate), and reading counts.{% empty %}If there are no search results, this content will be displayed to prompt the user that no related information was found. We are using{{urlParams.q}}Reflects the user's input keywords to make the prompt more friendly.
Through such settings, whenever the user enters different keywords, the search results page will dynamically display a list of matching content.
Optimize user experience: integrated pagination feature
When there are many search results, pagination is an essential feature. It is integrated into AnQiCMS.paginationTags can be associated witharchiveList type="page"perfectly, providing smooth pagination navigation.
the abovearchiveListBelow the label, we can add pagination code:
{# 分页代码 #}
<div class="pagination-container">
{% pagination pages with show="5" %}
<a class="pagination-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
{% if pages.PrevPage %}
<a class="pagination-link" href="{{pages.PrevPage.Link}}">上一页</a>
{% endif %}
{% for item in pages.Pages %}
<a class="pagination-link {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
{% endfor %}
{% if pages.NextPage %}
<a class="pagination-link" href="{{pages.NextPage.Link}}">下一页</a>
{% endif %}
<a class="pagination-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
{% endpagination %}
</div>
pagination pages with show="5"This code will generate a pagination navigation with up to 5 page numbers. It will depend on the total number of search resultsarchiveListset inlimitParameters, automatically calculate the total number of pages, and generate correct page link. This allows users to easily browse through multi-page search results.
Beyond keywords: UtilizearchiveFiltersImplement advanced filtering
The strength of AnQiCMS lies in its 'flexible content model' and the 'custom fields for content model' feature.We can define unique fields for different content models (such as articles, products), such as 'Property Type', 'Price Range', etc.archiveFiltersTags make use of these custom fields to provide a more refined and multi-dimensional filtering function on the search results page.
To add these advanced filters to the search results page, we need to combinearchiveFiltersTags:
<div class="filter-area">
{% archiveFilters filters with moduleId="1" allText="全部" %}
{% for item in filters %}
<div class="filter-group">
<span class="filter-label">{{item.Name}}:</span>
<ul class="filter-options">
{% for val in item.Items %}
<li class="{% if val.IsCurrent %}active{% endif %}">
<a href="{{val.Link}}">{{val.Label}}</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
{% endarchiveFilters %}
</div>
Here:
archiveFilters filters with moduleId="1" allText="全部"This will generate all available filters for the specified model ID (this is the article model, ID is 1).allText="全部"The display text defined for the 'Unlimited' option.{% for item in filters %}【en】Iterate through each filter group (for example, "Property Type").{% for val in item.Items %}【en】Iterate through each option within the filter group (for example, "Residential{{val.Link}}Each filter option generates a URL with parameters, which is triggered when the user clicks.archiveListThese filter parameters are automatically received to further narrow the search results range.
This way allows users not only to search through keywords but also to narrow down the scope by clicking on different filter conditions, thus obtaining a more precise list of content.
SEO friendly settings: Improve search page performance
In addition to functionality, the SEO performance of the search results page should not be neglected.Although the search results page is typically not the focus of SEO optimization, providing friendly TDK (Title, Description, Keywords) still helps with user experience and search engine understanding.
We cansearch/index.htmlparts of the<head>template usetdktags to dynamically set these elements:
<title>{% tdk with name="Title" siteName=true %} - 搜索结果</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
Of course, a more ideal approach would be toqgenerate these TDKs dynamically based on theqparameters, such as using the parameters as part of the
actual operation suggestions and template structure
To implement these dynamic display features in AnQi CMS, the key is to understand the template structure and tag usage. The template file for the search results page is/template/你的模板名称/search/index.htmlPlease make sure to follow the basic conventions of template creation for AnQiCMS while editing this file, such as using.htmlFile extensions, UTF8 encoding, Django template engine syntax, etc.
By using flexibilityarchiveList/paginationandarchiveFiltersTags such as these allow us to build a powerful, responsive, and rich content search experience for users.
Common Questions (FAQ)
How is the 'q' parameter in the search results page processed?archiveListLabel recognition?
When you arearchiveListsetting in the labeltype="page", AnQiCMS will automatically check if the current page URL contains a namedqThe query parameter. If it exists, the system will take its value as the search keyword and automatically apply it toarchiveListcontent filtering. This means that you do not need to explicitly write it in thearchiveListtag.q="{{urlParams.q}}"The system can intelligently capture and utilize this keyword.
2. How to display mixed results of different content models (such as articles and products) on the search results page?
archiveListTagsmoduleIdThe parameter allows you to specify the content model to be queried. If you want to display a mixed result of multiple content models, consider creating two or morearchiveListtags, each specifying differentmoduleIdThen combine and display their results. For example, first use onearchiveListto display the article results, and then use anotherarchiveListto display the product results. AlthougharchiveListThe system does not support direct cross-model mixed search, but it can be flexibly implemented through multiple calls to the template layer.
How to implement custom sorting on the search results page, such as sorting by the latest release or by popularity?
archiveListTags provideorderParameters that can be used to specify the sorting method of search results. For example,order="id desc"means sorted by ID in descending order (usually the most recent),order="views desc"means sorted by view count in descending order (usually the most popular). You cansearch/index.htmlIn the template, by adding some sort links, allow users to dynamically select sorting methods, and pass the sorting parameters to the URL, thenarchiveListTags will adjust the sorting according to the parameters in the URL.