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

In website content operation, providing users with convenient and accurate content search experience is crucial.When the number of articles on the website continues to grow, a practical search function can greatly enhance user satisfaction and content reach efficiency.q=关键词Parameters such as these, can directly retrieve and view related content.

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

一、Understand AnqiCMS's URL parameter search mechanism

AnqiCMS was designed with SEO-friendliness and the efficiency of content management in mind from the very beginning.When processing the search requests for the article list page, the core mechanism lies in the built-in template tags that can intelligently parse the specific parameters in the URL.

Specifically, when the URL of our article list page contains something similar to?q=您的关键词AnqiCMS'sarchiveList标签在以分页模式（English）调用文章时，会主动识别并利用这个type="page"）调用文章时，会主动识别并利用这个qParameters, it will filter and display articles that match the keywords.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.

二、实现文章列表页面URL参数搜索的步骤

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

1. Determine the search result display page

通常，我们会有一个专门的搜索结果页面来展示搜索到的文章列表。在AnqiCMS中，这个页面的模板文件通常是位于template/your_template_name/search/index.html。If you have a specific article list page that you want to integrate 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), its core HTML structure should include aformelement, and the submission method isGETEnglish translation: Such keywords will appear 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"English translation: Specify the form submission method as GET to ensure that the search keywords are passed as URL parameters.
  • action="/search"：Specify the target URL for form submission. The default search results page path for AnqiCMS is usually/search. Please confirm or modify it according to your actual website configuration.
  • name="q"：This is the key! AnqiCMS'sarchiveListThe tag will find 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 beqThe value of the parameter is filled back into the search box, so that the user knows what the current search keyword is, making it convenient to modify or conduct a secondary search.

3. Display search results and pagination

In the template file (such as the one that carries search resultssearch/index.html), we need to usearchiveList tags 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 process the list in pagination mode, so it can capture the URL inqthe parameters and automatically perform search filtering. At the same time, it will generatepagesVariables for pagination tags.
    • limit="10"Sets 10 articles to be displayed per page.
    • No manual passing required.qParameters: whentype="page"whenarchiveListIt will automatically detect the URL.qThe parameter, and use it as a search keyword to filter articles, very convenient.
  • {% for item in archives %}: Iterate overarchiveListThe array of articles obtained,itemRepresents each article. You can output the title, link, description, category, publish time, and reading volume of the article as needed.
  • {% empty %}This is a feature of the Django template engine, whenarchivesthe array is empty (i.e., no articles were found), it will display{% empty %}and{% endfor %}the content between the quotes, providing a friendly hint.
  • {% pagination pages with show="5" %}English: Display pagination navigation.
    • pagesEnglish: Variables are defined by.type="page"ofarchiveListThe label is automatically generated and includes all the necessary information 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 to the middle page numbers.
    • AnqiCMSpagination标签会自动处理URL中的q参数，确保翻页时搜索关键词不会丢失，用户可以继续在搜索结果中翻页。

4. 扩展：利用自定义筛选参数

Except for the basic keyword search (q参数），AnqiCMS also supports URL parameter filtering based on custom fields of articles.If you define additional filterable fields (such as 'region', 'product type', etc.) in the background content model, these fields can also be filtered through URL parameters.

For example, if you define a single-line text custom field namedsexfilter fields, including the options "Male" and "Female", users can accessyourdomain.com/search?q=关键词&sex=男Filter by keywords and gender at the same time. This requires you to cooperate with the template.archiveFiltersTags are used to build the filter 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 aboutqParameter naming conventions, if changed, the system will not be able to automatically recognize search keywords.
  • Template file pathEnsure your search form:action路径和搜索结果页面模板的实际位置相符。AnqiCMS默认会查找search/index.html作为搜索页。
  • Static rules：如果您的网站启用了自定义伪静态规则，请确保/searchThe path (or the custom search results path you set) is correctly handled by the pseudo-static rule so that AnqiCMS can parse it normally.
  • User experience optimization：In addition to the basic search functionality, you can consider adding features such as search history, popular search terms, and search suggestions to further enhance the user experience.

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

Common Questions (FAQ)

Q1: Why did I set up the search box, but there are no articles displayed on the search results page, or it shows “Sorry, no results found…”? 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 to solve the problem that the search keywords are lost in the pagination links of the search results page, causing the search conditions to fail after flipping pages? A2:AnqiCMSpaginationThis has been considered during the tag design. 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 (qParameter) and other filtering parameters. If any are missing, please check carefullyarchiveListandpaginationWhether the parameters of the tag are complete and correct,archiveListoftype="page"properties.

Q3: I want to implement multi-condition search in the search box, such as searching by category and keywords at the same time, can AnqiCMS do that? A3:Yes, AnqiCMS supports multi-condition URL parameter search. In addition,qParameters are used for keyword search, and you can also attach other custom parameters in the URL for multi-condition filtering, as long as 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 in the search form to specify the category ID, and after submission, the URL may change toyourdomain.com/search?q=关键词&categoryId=10In the template,archiveListTags will automatically recognize and combine these parameters for filtering. You can further explorearchiveFilterstags to build more complex filtering interfaces.