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

In website operation, the in-site search function is a key element in enhancing user experience and helping visitors quickly find the content they need.A highly efficient search mechanism can not only improve user satisfaction but also extend the time users spend on the website.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 stages:Set up a search form, create a search results page template, and use template tags to display content.Next, we will delve into the specific operations step by step.

Core Mechanism: How does the AnQi CMS site search work

When a user enters keywords and submits a search on the site, these keywords are usually transmitted through URL parameters (such as?q=您的关键词The form of the content passing to the specified search results page is 【en】：[{"keyarchiveListTags are retrieved from the content repository based on keywords and presented to the user on the preset template page. The entire process is efficient and automated, requiring no complex backend configuration.

Step 1: Create an intuitive search form

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

Here 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's/searchdirectory.name="q"Is the parameter name of the keyword, and Anqi CMS will default to recognizing this parameter.value="{{urlParams.q}}"It is a thoughtful detail that ensures the search keywords entered are retained in the search box when the search results page is refreshed or returned, enhancing the user experience.

Second step: Design the search results page template

Next, we need to create a special template file for the search results. According to the template design conventions of Anqi CMS, the template file for the search results page should be namedsearch/index.html[If using the folder organization mode] orsearch.html[If using the flattened file organization mode], and place it in the currently active template theme directory.

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

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

Insearch/index.htmlorsearch.htmlTemplate internally, we will use the powerful AnQi CMSarchiveListTags to dynamically retrieve and display documents matching user keywords. This tag 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 for looping to display the results.
  • type="page"It indicates that we want to paginate the search results, which is the premise for implementing pagination navigation.
  • limit="10"It specified that 10 search results are displayed per page.
  • Most importantly, if there isq=关键词such a query parameter,archiveListthe tags willbe automatically read.Use this keyword to match content without explicitly setting it in the tags.q="...".
  • {% empty %}Block for handling cases with no search results, providing a friendly prompt.
  • {{item.Link}}/{{item.Title}}/{{item.Description}}The variables, respectively, correspond to the links, titles, and descriptions of the documents found in the search.|truncatechars:150The filter ensures that the description content will not be too long.

Step 4: Implement pagination functionality.

If the number of search results is large, pagination is indispensable. InarchiveListAfter the tag, 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>
  • pagesYespaginationTags generated containing pagination information.
  • show="5"Indicating that up to 5 pagination buttons are displayed on the page, for example1 2 3 4 5 ....
  • By loopingpages.Pages, we can iterate and display each page link.item.IsCurrentCan be used to judge the current page number, thereby adding a highlight style.pages.PrevPageandpages.NextPageIt provides links to 'Previous Page' and 'Next Page'.

A functionally complete and user-friendly on-site search system has been set up in Anqi CMS through these steps.It not only helps visitors efficiently retrieve content but also provides website managers with convenient content operation tools.

Common Questions and Answers (FAQ)

  1. Ask: What will be displayed on the page if the search results are empty?Answer: InarchiveListInside the tag, we used{% empty %}Statement block.When no matching keywords are found in any document, the content within this statement block will be displayed.In the above example, it will display “Sorry, no documents were found related to ‘{{urlParams.q}}’.” }]Please try other keywords.Please customize this prompt message as needed.

  2. Ask: Can search results be sorted according to which rules?Answer:archiveListtag supportorderParameters can be used to specify the sorting rules. For example, you can set it toorder="id desc"(Sorted by publish time, i.e., the latest first),order="views desc"(Sorted by views, i.e., 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. Q: How to make the URL of the search results page more beautiful or SEO-friendly?Answer: AnQi CMS is inherently SEO-friendly, and its pseudo-static feature helps optimize URL structure. Default/searchThe path is quite simple. If you have specific URL structure requirements, you can customize the URL rules for the search page in the 'Function Management' section of the Anqi CMS backend under 'Static Rule Settings', for example, set it to/search/{keyword}.htmlSuch forms, to better adapt to SEO strategies and user reading habits. However, please note that customizing pseudo-static rules requires careful operation to ensure there are no conflicts or dead links.