How to help visitors quickly and accurately find the information they need in the face of increasingly large amounts of website content is the key to improving user experience and website value.AnQiCMS (AnQiCMS) deeply understands the art of content management, providing us with a powerful and flexible keyword search mechanism that allows the document list page to easily implement keyword search and elegantly present the results.
Understand the search core of Anqi CMS:archiveListThe magic use of tags
The core of the keyword search function of AnQi CMS lies in its powerful template tag system, especiallyarchiveListTags andqThe clever combination of parameters. As the content of our website grows continuously, visitors hope to search quickly through keywords, and the Anqi CMS can achieve thisarchiveListLabel to accurately filter out documents containing specific keywords and display them on the search results page.This process is very intuitive for template developers, and can be achieved without complex programming.
Build a user-friendly search form
Firstly, we need to provide a search entry on the website, which is usually a search box. Building such a search form in Anqi CMS is very simple, it is a standard HTML<form>Label. To make the search engine friendly and convenient for users to share search results, we usually chooseGETa method to submit the form.
The following is an example of a typical search form, you can place it in the header, sidebar, or any location where you want to provide a search function:
<form method="get" action="/search">
<div>
<input type="text" name="q" placeholder="请输入搜索关键词" value="{{urlParams.q}}">
<button type="submit">搜索</button>
</div>
</form>
In this form,action="/search"指明了搜索结果页面通常对应的URL路径，而input元素的name="q"是一个关键点，它告诉安企CMS将用户输入的文本作为搜索关键词。value="{{urlParams.q}}"This part is a small trick that allows the search box to automatically display the user's last entered keywords on the search results page, greatly enhancing the user experience.
Display search results on the document list page
The website will jump to after the user submits the search form/searchThe corresponding template file of this page (usuallysearch/index.htmlorsearch.html), we need to usearchiveListTag to get and display search results.
archiveListTagged throughtype="page"Parameter to enable pagination mode andlimitParameter to define the number of documents to display per page. More intelligent is, if the URL carriesq=关键词Query parameters,archiveListThe label will automatically capture and use this keyword to search, without the need for us to write additional code in the template to parse URL parameters.
The following is an example of template code displayed on the search results page:
<div>
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<article 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>
{% if item.Thumb %}
<div class="thumbnail">
<a href="{{item.Link}}">
<img alt="{{item.Title}}" src="{{item.Thumb}}">
</a>
</div>
{% endif %}
</article>
{% empty %}
<div class="no-results">
抱歉，没有找到与“{{urlParams.q}}”相关的结果。请尝试其他关键词。
</div>
{% endfor %}
{% endarchiveList %}
{# 分页导航区域 #}
<nav class="pagination-area">
{% pagination pages with show="5" %}
<ul>
<li class="page-info">总计 {{pages.TotalItems}} 条结果，共 {{pages.TotalPages}} 页</li>
<li><a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
{% if pages.PrevPage %}
<li><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
{% endif %}
{% for item in pages.Pages %}
<li><a class="{% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a></li>
{% endfor %}
{% if pages.NextPage %}
<li><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
{% endif %}
<li><a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
</ul>
{% endpagination %}
</nav>
</div>
In this template code, we have done several important things:
{% archiveList archives with type="page" limit="10" %}This line of code indicates that the system retrieves the document list in paginated mode, displaying 10 items per page.archivesis the custom variable name used to store the document data found.{% for item in archives %}：Loop through each search result.itemThe variable represents the current document, from which we can obtain the document'sTitle(Title),Link(Link),Description(description),Thumb(thumbnail) and other information.{% empty %}Statement block: This is a very practical function of the Anqi CMS template tag. WhenarchiveListNo documents matching the criteria were found.emptyThe content within the block will be displayed instead of a blank page, providing a friendly 'no results' prompt.{% pagination pages with show="5" %}English: To enable users to browse multiple pages of search results, we have integratedpaginationEnglish: It will base onarchiveListThe label returns the pagination data, automatically generates "Homeshow="5"Specifies that up to 5 page number buttons are displayed.
Suggestion for optimizing search experience
- Keyword retention:As mentioned before, in the search form's
inputelements usingvalue="{{urlParams.q}}"，Allow users to see the keywords they previously entered on the search results page, convenient for modification or re-search. - No results feedback:Make full use of
archiveListTags{% empty %}Blocks, providing users with clear, friendly no result prompts, and suggesting trying other keywords or browsing other content. - [en] SEO Optimization:The TDK (Title, Description, Keywords) on the search results page is also worth paying attention to.虽然安企CMS的TDK标签默认服务于文章、分类、单页等，但我们可以通过自定义模板或结合后台设置，让搜索结果页的TDK更具针对性，例如将搜索关键词融入页面标题中，以提升搜索引擎对搜索结果页的理解。
The keyword search function of AnQi CMS is not only easy to implement, but also seamlessly integrated with built-in templates and SEO features, providing efficient content discovery methods for website visitors and flexible content presentation capabilities for website administrators, which is a boost