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

In the operation of a website, the on-site search function plays a crucial role.It not only helps visitors quickly find the information they need, enhancing user experience, but also enables insights into user needs through the analysis of search data, thus optimizing content strategies.As an efficient content management system, AnQi CMS provides a set of intuitive and powerful mechanisms to implement in-site search for the website and flexibly display search results.

The site search function of AnQi CMS is very practical.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 typically predefined in the template, responsible for receiving user queries and retrieving relevant information from all articles (or specific content models) on the website based on the query content, ultimately presenting it to the user in a structured manner.

First, prepare the search template file

To implement site search, first you need to prepare a named file in your AanQi CMS theme templatesearch/index.html[file].This file is the default page identified and used by AnQi CMS to handle all search requests.You can build search boxes, search result lists, pagination navigation, and other elements according to your design requirements in this file.

Indesign-director.mddocument mentionssearch/index.htmlis the default search page template, which means all requests sent to/searchThe request for the path will be rendered by this template.

II. Constructing the user search form

Allow users to input keywords is the first step of the search function. This is usually achieved through an HTML form. The form needs to specify the submission method asGET, and the search request'sactionpointing to/searchPath. The core input box should be named.qfor AnQi CMS.archiveListThe label will automatically recognize this parameter as a search keyword.

To enhance user experience, you can also make the search box retain the keywords entered by the user after submission, so that the user can know what they searched for previously. This can be achieved by{{urlParams.q}}This template variable is easy to implement.

Here is an example of a simple search form:

<form method="get" action="/search">
    <div>
        <input type="text" name="q" placeholder="请输入搜索关键词" value="{{urlParams.q}}">
        <button type="submit">搜索</button>
    </div>
</form>

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

3. 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. The Anqi CMS provides powerfularchiveListtags to complete this task.

archiveListTagstype="page"The parameter is crucial, indicating that we expect a paginated list of articles. When you usearchiveListand the parameter is included in the URLqwhenarchiveListthe tag will be automatically readqThe value, and use it as a keyword to filter articles. It will match the title, description, and relevant fields in the article body, and present articles that contain the keyword.

You can start fromarchiveListTag to get the detailed information of each article, for example:

  • item.Title: Article title
  • item.LinkArticle link
  • item.DescriptionArticle summary
  • item.CreatedTimeArticle publish time (can usestampToDateformat)
  • item.ViewsArticle views
  • item.ThumbArticle thumbnail

When there are no search results,archiveListTags{% empty %}a block can be used to display friendly prompt information.

The following is an example code for displaying 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>

Four, Handling search results pagination

If the number of search results is large, pagination is an essential feature. The AnqiCMSpaginationTags andarchiveList type="page"tags can be used together to easily build a complete pagination navigation.

paginationTags will be based onarchiveListThe total number of articles returned and the number of articles displayed per page will automatically generate links to 'Home', 'Previous Page', 'Next Page', and the page numbers in the middle.

paginationTags provide multiple useful fields, such as:

  • pages.TotalItemsTotal number of articles:
  • pages.TotalPagesTotal number of pages:
  • pages.CurrentPageCurrent page number:
  • pages.FirstPageHome link object:
  • pages.PrevPagePrevious page link object
  • pages.NextPageNext page link object
  • pages.LastPageLast page link object
  • pages.PagesAn array containing links to the middle page numbers

Here 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 several steps, you can set up a fully functional and user-friendly in-site search system on the Anqi CMS website. The entire process does not require complex programming.