How to perform an in-site search in AnQi CMS based on keywords and display the search results?

In website operation, the in-site search function is a key link to improve user experience and help visitors quickly find the content they need.A highly efficient search mechanism can not only improve customer satisfaction but also extend the time users spend on the website.AnQiCMS (AnQiCMS) provides us with flexible and powerful tools to easily implement this feature.

To implement keyword-based in-site search and display results in Anqi CMS, it mainly involves three core links:Set up a search form, create a search results page template, and use template tags to display content.Next, we will go step by step to understand the specific operations.

Core Mechanism: How does the Anqi CMS internal search work

When a user enters keywords on the website and submits a search, these keywords are usually passed through URL parameters (such as?q=您的关键词The form is passed to the specified search results page. The Anqi CMS template system can intelligently recognize these URL parameters and use built-inarchiveListTags retrieve related documents from the content library based on keywords, and finally present them to the user on a preset template page. The entire process is efficient and automated, requiring no complex backend configuration.

The first step is to create an intuitive search form

First, we need to provide a search box on the website so that users can enter keywords.This search form is usually placed at the top navigation, sidebar, or a dedicated search page of the website.A standard HTML search form, the key isactionThe attribute points to the URL of the search results page, and onename="q"input field to capture the user's entered keywords.

This is an example of a concise search form:

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

In this example,action="/search"Indicates that the search results will be displayed on the website:/searchpath.name="q"Is the parameter name of the keyword, and Anqi CMS defaults to recognize this parameter.value="{{urlParams.q}}"It is a thoughtful detail that ensures the search box retains the previously entered keywords when the user refreshes or returns to the search results page, enhancing the user experience.

Step two: Design the search results page template

Next, we need to create a template file specifically for search results. According to the template design conventions of Anqi CMS, the template file for the search results page should be namedsearch/index.htmlOr if the folder organization mode is adoptedsearch.htmlAnd if the flattened file organization mode is adopted, place it in the current active template theme directory.

In this template file, we will build the layout of search results, including titles, result lists, and pagination navigation elements.

Step 3: Call and display the search results in the template.

Insearch/index.htmlorsearch.htmlWithin the template, we will use the powerful AnQi CMSarchiveListLabels to dynamically retrieve and display documents matching the user's keywords. This label can filter content based on various conditions, including the search keywords here.

<div class="search-results-container">
    <h2>搜索结果：{{urlParams.q}}</h2>
    {% archiveList archives with type="page" limit="10" %}
        {% for item in archives %}
        <div class="search-result-item">
            <a href="{{item.Link}}">
                <h3>{{item.Title}}</h3>
                <p>{{item.Description|truncatechars:150}}</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>
            </a>
            {% if item.Thumb %}
            <div class="result-thumbnail">
                <img alt="{{item.Title}}" src="{{item.Thumb}}">
            </div>
            {% endif %}
        </div>
        {% empty %}
        <div class="no-results-message">
            抱歉，没有找到与“{{urlParams.q}}”相关的文档。请尝试其他关键词。
        </div>
        {% endfor %}
    {% endarchiveList %}
</div>

here,{% archiveList archives with type="page" limit="10" %}Is the core:

• archivesThis is the variable name we will use to display the results in a loop.
• type="page"It indicates that we want to paginate the search results, which is the premise for implementing pagination navigation.
• limit="10"规定了每页显示10 search results。
• Most importantly, if the URL containsq=关键词query parameters,archiveListthe tag willautomatically readUse this keyword for content matching without explicitly setting it in the tagsq="...".
• {% empty %}Block for handling cases with no search results, providing a friendly prompt.
• {{item.Link}}/{{item.Title}}/{{item.Description}}Variables correspond to the links, titles, and descriptions of the documents found.|truncatechars:150The filter ensures that the description content will not be too long.

Step four: Implement pagination function

If the number of search results is large, the pagination feature is essential.archiveListthe tag, then immediately usepaginationTags can conveniently generate page navigation.

<div class="pagination-container">
    {% pagination pages with show="5" %}
        {% if pages.PrevPage %}
            <a href="{{pages.PrevPage.Link}}" class="prev-page">上一页</a>
        {% endif %}
        {% for item in pages.Pages %}
            <a class="page-number {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
        {% endfor %}
        {% if pages.NextPage %}
            <a href="{{pages.NextPage.Link}}" class="next-page">下一页</a>
        {% endif %}
    {% endpagination %}
</div>

• pagesIspaginationTags generate variables containing pagination information.
• show="5"It indicates that up to 5 page number buttons can be displayed on the page, for example1 2 3 4 5 ....
• Through looppages.Pages, we can iterate and display each page number link.item.IsCurrentCan be used to determine the current page number, thereby adding a highlight style to it.pages.PrevPageandpages.NextPageIt provides links for "Previous Page" and "Next Page".

By following these steps, a functional and user-friendly in-site search system has been set up in Anqi CMS.It not only helps visitors efficiently retrieve content but also provides website administrators with a convenient content operation tool.

Frequently Asked Questions (FAQ)

1. What will the page display if the search results are empty?Answer: InarchiveListInside the tag, we used {% empty %}Block of text. When no documents matching the keywords are found, the content within this block will be displayed.In the above example, it will display "Sorry, no documents were found related to '}}{{urlParams.q}}'.Please try other keywords.”, You can customize this prompt information as needed.

2. What rules can the search results be sorted by?Answer:archiveListTag supportorderParameters to specify the sorting rule. For example, you can set it toorder="id desc"(Sorted by publish time in descending order, i.e., the most recent first, and)order="views desc"(sorted by view count in descending order, i.e., the most popular content first), or use the default,order="sort desc"(sorted by custom sorting on the backend). You canarchiveListAdd this parameter to the tag to adjust the display order of search results.

3. How can I make the URL of the search results page more beautiful or SEO-friendly?Answer: Anqi CMS is inherently SEO-friendly, its static page feature can help optimize URL structure. Default the/searchThe path is quite concise. If you have specific URL structure requirements, you can customize the URL rules for the search page in the 'Function Management' -> 'Static Rules' section of the AnQi CMS backend, for example, set it to/search/{keyword}.htmlThe forms, in order to better adapt to SEO strategies and user reading habits. But please note that custom static rules should be handled with caution to avoid conflicts or dead links.