How to implement website in-site search and display article search results in AnQiCMS?

In website operation, the in-site search function plays a crucial role.It can not only help visitors quickly find the information they need and improve user experience, but also through the analysis of search data to understand user needs and optimize content strategies.AnQi CMS is an efficient content management system that provides a直观and powerful mechanism to implement website internal search and flexibly display search results.

The on-site search function of Anqi CMS is designed very practically.When a user enters a keyword to search on your website, the system will direct them to a dedicated search results page.This page is usually predefined in the template, it is responsible for receiving the user's query, and retrieving relevant information from all articles (or a specific content model) on the website based on the query content, ultimately presenting it to the user in a structured manner.

1. Prepare the search template file

To implement in-site search, first you need to prepare a namedsearch/index.htmlThe file. This file is recognized by AnQi CMS and used as the default page for handling all search requests.You can build search boxes, search result lists, pagination navigation and other elements according to your design requirements.

Indesign-director.mdmentioned in the documentsearch/index.htmlis the default search page template, which means all searches sent to/searchThe request path will be rendered by this template.

Second, build the user search form.

Allowing users to enter keywords is the first step in the search function. This is usually achieved through an HTML form. The form needs to specify the submission method asGET, and send the search request'sactionPoint to/searchPath. The core input box should be namedq，AnQi CMS'sarchiveListThe tag will automatically recognize this parameter as a search keyword.

To enhance the user experience, you can also allow the search box to retain the keywords entered by the user after submission, so that the user can know what they searched for previously. This can be done by{{urlParams.q}}This template variable can be easily implemented.

Here 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>

After a user enters a keyword and submits a form, for example, searching for 'AnQi CMS', the URL may change to/search?q=安企CMS. The template system of AnQi CMS will captureqThe value of the parameter, and pass it to the subsequent label for displaying the result.

Three, display the list of article search results

Insearch/index.htmlIn the template, the core task is to display a list of articles related to the user's search keywords. Anqicms provides powerfularchiveListtags to complete this task.

archiveListlabel'stype="page"The parameter is crucial, indicating that we expect an article list that supports pagination. When you use it on the search pagearchiveListand the URL containsqparameters,archiveListthe tag will automatically readqThe value, and use it as a keyword to filter articles. It will match the title, description, and relevant fields of the article, and present articles containing the keyword.

You can choose fromarchiveListTag to retrieve the detailed information of each article, such as:

• item.Title: Article title
• item.Link: Article link
• item.Description: Article Summary
• item.CreatedTime: Article publication time (can bestampToDateformatted)
• item.Views: Article views
• item.Thumb: Article Thumbnail

When there are no search results,archiveListlabel's{% empty %}the block can be used to display friendly prompt messages.

Here is an example of the code to display the search results list:

{# page 搜索指定关键词分页列表展示 #}
<div>
{% archiveList archives with type="page" limit="10" %} {# limit 参数控制每页显示的文章数量 #}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <div>{{item.Description}}</div>
            <div>
                <span>{% categoryDetail with name="Title" id=item.CategoryId %}</span> {# 显示文章所属分类 #}
                <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>

4. Handling search results pagination

If there are many search results, the pagination function is essential. Anqi CMS'spaginationwith the tag andarchiveList type="page"Using labels together, it can conveniently build a perfect pagination navigation.

paginationThe label will be based onarchiveListThe total number of articles returned and the number of articles displayed per page, automatically generates links for "Home", "Previous Page", "Next Page", and middle page numbers.

paginationTags provide multiple useful fields, such as:

• pages.TotalItemsTotal number of articles:
• pages.TotalPagesTotal number of pages:
• pages.CurrentPageCurrent page:
• pages.FirstPageHome link object:
• pages.PrevPagePrevious page link object:
• pages.NextPage: Next page link object
• pages.LastPage: End page link object
• pages.Pages: An array containing middle page number links

The following is an example of pagination navigation code:

    {# 分页代码 #}
    <div>
        {% pagination pages with show="5" %} {# show 参数控制中间页码显示的数量 #}
            {# 首页 #}
            <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
            {# 上一页 #}
            {% if pages.PrevPage %}
            <a href="{{pages.PrevPage.Link}}">上一页</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}}">下一页</a>
            {% endif %}
            {# 尾页 #}
            <a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
        {% endpagination %}
    </div>

By following these steps, you can set up a fully functional, user-friendly in-site search system on the Anqi CMS website. The entire process does not require complex programming,