How to implement keyword search and display results on the document list page?

How to help visitors quickly and accurately find the information they need among the increasingly vast content of a website 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 clever use of tags

The core of AnQi CMS's keyword search implementation lies in its powerful template tag system, especiallyarchiveListwith the tag andqThe clever combination of parameters. As the content of our website grows continuously, visitors hope to search quickly through keywords, Anqi CMS can achieve this througharchiveListTags to accurately filter documents containing specific keywords and display them on the search results page.This process is very intuitive for template developers, and can be implemented 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>Labels. To make search engines friendly and facilitate user sharing of search results, we usually chooseGETa method to submit the form.

This is an example of a typical search form, you can place it at the top of the website, in the sidebar, or any place 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"indicated the URL path that the search result page usually corresponds toinputelementname="q"is a key point that tells Anqi CMS to use the text entered by the user as the search keyword.value="{{urlParams.q}}"This part is a small trick, it allows the search box to automatically display the user's last input keyword on the search results page, greatly enhancing the user experience.

Display search results on the document list page

After the user submits the search form, the website will jump to/searchpage. On this page, the corresponding template file (usuallysearch/index.htmlorsearch.html) needs to be used.archiveListTag to get and display search results.

archiveListTag throughtype="page"Parameter to enable pagination mode and through.limitParameter defines the number of documents to display per page. More intelligent is that if the URL carries.q=关键词.archiveListThe tag 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.

This is an example of the 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 did several important things:

  1. {% 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 a custom variable name used to store the document data found.
  2. {% 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.
  3. {% empty %}Block: This is a very practical function of Anqi CMS template tags. WhenarchiveListNo documents matching the criteria were found.emptyThe content within the block will be displayed instead of a blank page, thus providing a friendly 'no results' prompt.
  4. {% pagination pages with show="5" %}: To allow users to browse multiple pages of search results, we combinedpaginationtags. It will be based onarchiveListThe tag returns pagination data, automatically generating 'Home', 'Previous Page', 'Next Page', and the navigation links of the middle page numbers.show="5"Specify up to 5 page number buttons.

Suggestion for optimizing search experience

  • Keyword retention:As mentioned before, in the search form'sinputelement usagevalue="{{urlParams.q}}"Let users see the keywords they entered previously on the search results page, convenient for modification or searching again.
  • No results feedback:Make full use ofarchiveListlabel's{% empty %}Block, provide users with clear and friendly no result prompts, and suggest trying other keywords or browsing other content.
  • SEO optimization:The TDK (Title, Description, Keywords) on the search results page is also worth paying attention to.Although the TDK tags of AnQi CMS are default served for articles, categories, single pages, etc., we can make the TDK of the search result page more targeted by customizing templates or combining backend settings, such as integrating search keywords into the page title to enhance the search engine's understanding of the search result page.

The keyword search function of Anqi CMS is not only easy to implement, but also seamlessly integrated with built-in templates and SEO functions, providing website visitors with an efficient way to discover content and website administrators with flexible content presentation capabilities, which is a way to improve