When visitors come to your website and hope to quickly find the information they need, an efficient and accurate in-site search function is particularly important.The AnQiCMS (AnQiCMS) has fully considered this from the beginning of its design, providing you with a flexible and powerful content management and template system, allowing you to easily display a list of documents that match the keywords in the search results page.Next, let's take a look at how to implement this feature.
Understand the search mechanism of Anqi CMS
The CMS has built-in powerful search capabilities, which will automatically index the content you publish.When a user submits a search request on the website, the system will match the user's input keywords with the title, keywords, summary, and even the main content of the document, and return the most relevant document.All these results will be displayed through a dedicated search page template, allowing you to fully control the way they are presented.
Step 1: Make sure your content is searchable
All efficient searches rely on high-quality content as a foundation. When publishing or editing documents in the AnQi CMS backend, please pay close attention to the following key information:
FirstlyDocument TitleThis is the first window for users and search engines to understand the content topic. The title should be clear, accurate, and include core keywords.
ThenDocument SummaryIt provides a brief overview of the document, which is usually displayed on the search engine results page. If not filled in, the system will automatically extract the first 150 words of the document content.
The most important thing isDocument keywordsIn the "Add Document" page, you can manually enter or select relevant keywords from the keyword library. It is recommended to use English commas between multiple keywords.,Perform segmentation, which not only helps the internal search of the security CMS, but also conforms to the indexing habits of search engines, and comprehensively improves the visibility of your documents in various search scenarios.
第二步：Configure your search results page template
In the AnQi CMS, the display logic of search results is usually handled by a dedicated template file, which is located in your template directory.search/index.html.This template file is the core for customizing the layout and style of your search results page.You can edit it to decide how the search box appears, how search results are arranged, and which information each document entry will display, such as thumbnails, titles, descriptions, and so on.
Third step: Use in templatearchiveListTag to get search results
To besearch/index.htmlDisplay matching keywords in the template, the core is to use the security CMS providedarchiveListLabel. This label is very flexible and can be used to retrieve various document lists, including our search results.
When you are going toarchiveListTagstypeparameter settings"page"When it is, it will intelligently identify the keywords parameters passed in the URL search form (usuallyq), and automatically filter and display the documents based on these keywords.
The following is a basic example showing how tosearch/index.htmlinarchiveListdisplay the search results in a loop using tags
{# 搜索结果页 (search/index.html) #}
<div>
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<div>{{item.Description}}</div>
<div>
<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>
In this code snippet,archiveListLabel is automatically retrieved from the current URL to match search keywords, and 10 results are displayed per page. Byfor item in archivesloop, you can access the title of each document (item.Title) and the link (item.Link) and the description (item.Description) Information, and arrange it according to your design requirements.
Fourth step: Add a friendly search form.
To enable visitors to easily input keywords for search, you need to place a search form in a prominent position on the website, such as the header or content area. The purpose of this form isaction="/search"and its text input box,nameproperty must be set toq.
In order to enhance the user experience,{{urlParams.q}}This variable retains the keywords entered by the user after they submit a search, keeping them in the search box. This way, if the user wants to modify the keywords or perform a second search, they do not have to re-enter them.
This is a simple search form example:
<form method="get" action="/search">
<div>
<input type="text" name="q" placeholder="请输入搜索关键词" value="{{urlParams.q}}">
<button type="submit">搜索</button>
</div>
</form>
Step five: Implement pagination for search results.
When there are many search results, pagination is the key to improving user experience. The Anqi CMSarchiveListTags intype="page"模式下，withpaginationtags perfectly match, allowing for easy pagination effects.
You just need to specify inarchiveListtags, then addpaginationtags, and specify how many page buttons you want to display. For example,show="5"Indicates that up to 5 page numbers are displayed.
{# 假设这是接在archiveList标签之后的分页代码 #}
<div>
{% pagination pages with show="5" %}
{# 首页 #}
<a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
{# 上一页 #}
{% if pages.PrevPage %}
<a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
{% endif %}
{# 中间多页 #}
{% for item in pages.Pages %}
<a class="{% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
{% endfor %}
{# 下一页 #}
{% if pages.NextPage %}
<a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
{% endif %}
{# 尾页 #}
<a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
{% endpagination %}
</div>
PasspagesThe object allows you to flexibly build navigation for “Home”, “Previous Page”, “Next Page”, and middle page numbers, and add corresponding styles based on the current page state.
Summary
Through these several simple steps, you can build a fully functional and user-friendly search results page on the Anqi CMS website. From keyword filling at the time of content publishing, to the fine design of the search page template, to the use ofarchiveListandpaginationLabel dynamic display results, all provided by Auto CMS offer intuitive and powerful tools to help you achieve your goals, making your website content easier for visitors to discover and utilize.
Common Questions (FAQ)
1. Why are my search results sometimes inaccurate or unable to find certain documents?The accuracy of search results is closely related to the quality of the content you publish and the keyword settings.Please check if the title, introduction, and keywords of the document are accurate and relevant.If the document content is less, it may also affect the search match accuracy.Also, ensure that the relevant content has been correctly indexed by the system when the document is published.If you suspect an indexing issue, you can try updating the cache after modifying the document and let the system process it again.
2. Can I customize the URL structure of the search results page?Yes, Anqi CMS supports flexible pseudo-static rule configuration.You can find the 'URL structure of search page' setting under the 'Function Management' in the background, and choose or customize the URL structure of the search page./search?q=关键词3. Or other more friendly forms. Custom rules require careful handling to ensure they do not conflict with other page rules.
3. How to adjust the layout and style of the search results page?The layout and style of the search results page are completely controlled by yoursearch/index.htmltemplate file and associated CSS and JavaScript files. You can modify it just like any other page template,search/index.htmlAdd HTML structure freely, introduce custom CSS styles, and even write JavaScript code to achieve richer interactive effects. The template system of Anqi CMS is based on the Django template engine syntax, providing a high degree of...