How to implement search through URL parameters (such as `q=keyword`) on the article list page and display the results?

It is crucial to provide users with a convenient and accurate content search experience in website content operation.When the number of articles on a website continues to grow, a practical search function can greatly enhance user satisfaction and the efficiency of content access.AnqiCMS as an efficient content management system provides a flexible way to implement URL parameter search functionality on the article list page, allowing visitors to add parameters to the URL byq=关键词Enter the parameters, and you can directly retrieve and view the related content.

This article will introduce in detail how to configure this feature in AnqiCMS, helping you optimize website content search and improve user experience.

Understand the URL parameter search mechanism of AnqiCMS

AnqiCMS was designed from the ground up with SEO-friendliness and efficient content management in mind.When processing the search request for the article list page, its core mechanism lies in the built-in template tags that can intelligently parse specific parameters from the URL.

Specifically, when the URL of our article list page contains something like?q=您的关键词such parameters, AnqiCMS'sarchiveListTags in page mode(type="page")When calling articles, it will actively identify and utilize thisqThe parameter will filter out articles that match the keywords and display them.This search method based on URL parameters is not only friendly to search engines but also convenient for users to share and collect result pages with specific search conditions.

Second, implement the URL parameter search steps of the article list page

To implement this feature, we mainly need to make some adjustments to the website template files, including adding a search form and configuring the display logic of the article list.

1. Determine the search results display page

We usually have a dedicated search results page to display the list of articles found. In AnqiCMS, the template file for this page is usually located attemplate/your_template_name/search/index.html. If you have a specific article list page that you want to integrate with the search function, you can also modify the corresponding template on that page.

2. Build the search form

No matter where the search box is placed on the website (such as the navigation bar, sidebar, or top of the list page), the core HTML structure should include oneformelement, and the submission method isGETSo the keyword will be reflected in the URL.

<form method="get" action="/search"> {# 确保 action 路径正确，通常是 /search #}
    <div>
        <input type="text" name="q" placeholder="请输入搜索关键词" value="{{urlParams.q}}">
        <button type="submit">搜索</button>
    </div>
</form>

Code explanation:

  • method="get": Specify the form submission method as GET to ensure that the search keyword will be passed as a URL parameter.
  • action="/search": Specify the target URL for form submission. The default search result page path of AnqiCMS is usually/search. Please confirm or modify it according to your actual website configuration.
  • name="q"This is the key! AnqiCMS'archiveListThe tag will look for the parameter namedqin the URL to get the search keywords.
  • value="{{urlParams.q}}"This part is designed to enhance user experience. When the user submits a search, if the search results page (or the page containing the search form) is reloaded,{{urlParams.q}}the current URL will beqFill the parameter value into the search box so that the user knows what the current search keyword is, making it convenient to modify or perform a secondary search.

3. Display search results and pagination

In the template file that carries the search results (for examplesearch/index.html), we need to usearchiveListtags to dynamically retrieve and display articles.

<div>
    {% archiveList archives with type="page" limit="10" %} {# type="page" 启用分页模式，limit="10" 设置每页显示10篇文章 #}
        {% 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>
            抱歉，没有找到与“{{urlParams.q}}”相关的文章。
        </li>
        {% endfor %}
    {% endarchiveList %}

    {# 分页代码 #}
    <div>
        {% pagination pages with show="5" %} {# show="5" 表示分页条最多显示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>
</div>

Code explanation:

  • {% archiveList archives with type="page" limit="10" %}: This is the core tag for calling the article list.
    • type="page"Tell AnqiCMS to handle the list in pagination mode so that it can capture the URL parameters and automatically perform search filtering. At the same time, it will generateqpagesThe variable is used for pagination tags.
    • limit="10": Set to display 10 articles per page.
    • No manual transmission is required.qParameter：Whentype="page"then,archiveListIt will automatically detect the URL in.qParameters, and use it as a search keyword to filter articles, very convenient.
  • {% for item in archives %}：TraversearchiveListThe array of articles obtained,itemRepresents each article. You can output the title, link, description, category, publication time, and reading volume of the articles as needed.
  • {% empty %}This is a feature of the Django template engine whenarchivesthe array is empty (i.e., no articles are found) it will display{% empty %}and{% endfor %}the content between, providing a friendly prompt.
  • {% pagination pages with show="5" %}: Display pagination navigation.
    • pagesVariables are defined bytype="page"ofarchiveListTags automatically generated, which contain all the information required for pagination, such as the total number of pages, the current page, the first page, the last page, the previous page, the next page, and the links of the middle page numbers.
    • AnqiCMS'spaginationtags will automatically handle the parameters in the URL ofqParameters, ensure that the search keywords are not lost when pagination occurs, and users can continue to browse the search results.

4. Expansion: Using custom filtering parameters

Except for basic keyword search(qParameter), AnqiCMS also supports URL parameter filtering based on custom fields of articles.If you define additional filterable fields in the backend content model (such as "region", "product type", etc.), these fields can also be filtered via URL parameters.

For example, if you define a field namedsexwith options such as "male" and "female", users can access byyourdomain.com/search?q=关键词&sex=男Filter by keywords and gender at the same time. This requires you to cooperate with the template.archiveFiltersTag to build a filtering interface and ensure the correct construction of URL parameters. This advanced filtering feature provides the website with more refined content search capabilities.

Three, practical suggestions and precautions

  • URL parameter naming conventionsPlease strictly comply with AnqiCMS regardingqParameter naming conventions, if changed, the system will not be able to automatically identify search keywords.
  • Template file pathEnsure your search form:actionThe actual location of the path and search results page template matches. AnqiCMS defaults to searching forsearch/index.htmlas the search page.
  • Static rules: If your website has enabled custom pseudo-static rules, please make sure/searchThe path (or the custom search results path you specify) is correctly handled by the static rules so that AnqiCMS can parse it normally.
  • User experience optimization: Besides the basic search function, you can consider adding features such as search history, popular search terms, and search suggestions to enhance the user experience.

By following these steps, you can easily implement the URL parameter search function on the article list page of the website built with AnqiCMS, providing your visitors with an efficient and friendly content search method.

Frequently Asked Questions (FAQ)

Q1: Why did I set up a search box, but the search results page does not display any articles, or shows A1:Please check the following points first:

1.  **关键词是否正确传递**：检查浏览器URL中是否有`?q=关键词`这样的参数，并且关键词是否与文章内容匹配。
2.  **`archiveList`标签配置**：确保您的`archiveList`标签中设置了`type="page"`。如果缺少此参数，`archiveList`可能不会自动捕获URL中的`q`参数。
3.  **搜索模板路径**：确认搜索结果页面对应的模板文件（例如`search/index.html`）是否存在且被正确调用。
4.  **文章内容是否存在**：确保您的网站中确实存在包含您搜索关键词的文章。

Q2: How do you deal with the loss of the search keyword in the pagination link on the search results page, which causes the search conditions to fail after flipping the page? A2:AnqiCMS'spaginationThis has been considered in the design of the tag. As long as yourarchiveListLabel is correctly set totype="page"and your pagination code uses{% pagination pages with show="X" %}this standard format, then the generated pagination links will automatically include the original search keywords (qThe parameters and other filtering parameters. Please check carefully if any are missingarchiveListandpaginationAre the parameters of the tag complete and correct, especiallyarchiveListoftype="page"Property.

Q3: Do I want to implement multi-condition search in the search box, such as searching by category and keyword at the same time, can AnqiCMS do it? A3:Yes, AnqiCMS supports multi-condition URL parameter search. In addition toqParameters are used for keyword search, and you can add other custom parameters to the URL to implement multi-condition filtering, provided that these custom fields have been set as filterable in the content model of AnqiCMS backend. For example, you can add a hidden field or a dropdown selection box to specify the category ID in the search form, and the URL after submission may becomeyourdomain.com/search?q=关键词&categoryId=10In the template,archiveListTags will automatically recognize and combine these parameters for filtering. You can further explorearchiveFilterstags to build a more complex filtering interface.