How to display the document list matching the keywords on the search results page?

When visitors come to your website and hope to quickly find the information they need, a highly efficient and accurate on-site search feature is particularly important.AnQiCMS (AnQiCMS) has fully considered this from the beginning, providing you with a flexible and powerful content management and template system, allowing you to easily display a list of documents matching keywords on the search results page.Next, let's take a look at how to implement this feature together.

Understand the search mechanism of Anqi CMS

The AnQi CMS is built with powerful search capabilities, it will automatically index the content you publish.When a user submits a search request on a website, the system will match the user's input keywords with the title, keywords, abstract, and even the content of the document, and return the most relevant document.All these results will be displayed through a dedicated search page template, allowing you to fully control the way they are presented.

First step: Ensure your content is searchable

All efficient searches rely on a high-quality content foundation. When publishing or editing documents in the Anqi CMS backend, please pay attention to the following key information:

FirstlyDocument titleThis is the first window for users and search engines to understand the content theme. The title should be clear, accurate, and include core keywords.

Next isDocument IntroductionIt provides a brief overview of the document, which is also what is usually displayed on the search engine results page. If not filled in, the system will automatically extract the first 150 words of the document content.

Most importantlyDocument keyword. On the 'Add Document' page, you can manually enter or select relevant keywords from the keyword library. It is recommended to use English commas between multiple keywords.,Separate it, this not only helps the internal search of the Aque CMS, but also conforms to the collection habits of search engines, and comprehensively improves the visibility of your documents in various search scenarios.

Step two: Configure your search results page template

In AnQi CMS, the display logic of search results is usually handled by a dedicated template file, which is located in your template directory.search/index.htmlThis template file is the core of your custom search results page layout and style.You can edit it to decide how the search box appears, how the search results list is arranged, and what information each document entry will display, such as thumbnails, titles, descriptions, etc.

Step 3: Use in the template.archiveListLabel to get search results

To besearch/index.htmlThe template displays documents that match the keywords, the core is to use the Anqi CMS providedarchiveListLabel. This label is very flexible and can be used to retrieve various document lists, including our search results.

When you are going toarchiveListlabel'stypethe parameter to"page"It will intelligently recognize the keyword parameters passed in the search form in the URL (usuallyq), and automatically filter and display documents based on these keywords.

Here is a basic example that shows how tosearch/index.htmlis usedarchiveListUse tags to cyclically display the searched documents:

{# 搜索结果页 (search/index.html) #}
<div>
    {% archiveList archives with type="page" limit="10" %}
        {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h5>{{item.Title}}</h5>
                <div>{{item.Description}}</div>
                <div>
                    <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>

In this code snippet,archiveListTags automatically retrieve search keywords from the current URL, match them, and display 10 results per page. Throughfor item in archivesLoop, you can access the title of each document (item.Title) and link (item.Link), Description (item.DescriptionPlease provide the information, and arrange it according to your design requirements.

Step 4: Add a friendly search form.

To enable visitors to easily input keywords for search, you need to place a search form in a prominent position on the website, such as the header or content area. The purpose of this form isaction="/search"and its text input box'snameattribute must be set toq.

At the same time, you can also make use of to improve the user experience{{urlParams.q}}This variable retains the keywords entered by the user after they submit a search. This way, if the user wants to modify the keywords or perform a second search, they do not have to re-enter them.

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

Step five: Implement pagination for search results

Pagination is the key to improving user experience when there are many search results. Anqi CMS'sarchiveListThe tag is intype="page"In mode, withpaginationtags perfectly match, allowing for easy pagination.

You just need to specify inarchiveListAfter the tag, addpaginationtag, and specify how many pagination buttons you want to display. For example,show="5"this means that up to 5 page number buttons are displayed.

{# 假设这是接在archiveList标签之后的分页代码 #}
<div>
    {% pagination pages with show="5" %}
        {# 首页 #}
        <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        {# 上一页 #}
        {% if pages.PrevPage %}
        <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</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}}">{{pages.NextPage.Name}}</a>
        {% endif %}
        {# 尾页 #}
        <a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
    {% endpagination %}
</div>

BypagesAn object, you can flexibly build the "home page", "previous page", "next page" and middle page number navigation, and add the corresponding style according to the current page state.

Summary

By following these few simple steps, you can build a fully functional, user-friendly search results page on the Anqi CMS website. From keyword filling during content publishing, to the meticulous design of the search page template, to utilizingarchiveListandpaginationThe tag dynamically displays results, Anqi CMS provides intuitive and powerful tools to help you achieve your goals, making your website content easier for visitors to discover and utilize.

Frequently Asked Questions (FAQ)

1. Why are my search results sometimes inaccurate or unable to find certain documents?The accuracy of search results is closely related to the quality of the content you publish and the keywords you set.Please check the accuracy and relevance of the document's title, abstract, and keywords.If the document content is less, it may also affect the search match accuracy.In addition, please ensure that the relevant content has been correctly indexed by the system when the document is published.If you suspect it is an indexing issue, you can try modifying the document and updating the cache to let the system reprocess.

2. Can the URL structure of the search results page be customized?Yes, Anqi CMS supports flexible pseudo-static rule configuration.You can find the 'Static Rules' settings under the 'Function Management' backend, select or customize the URL structure of the search page.For example, you can set it to/search?q=关键词Or a more friendly form. Custom rules need to be operated with caution to ensure they do not conflict with other page rules.

How to adjust the layout and style of the search results page?The layout and style of the search results page are completely controlled by yoursearch/index.htmltemplate files and associated CSS and JavaScript files. You can modify it like other page templates, insearch/index.htmlAdd HTML structure freely, introduce custom CSS styles, even write JavaScript code to achieve richer interactive effects. Anqi CMS's template system is based on Django template engine syntax, providing a high degree of