How to make your website content more intelligent and considerate to serve visitors in today's increasingly refined content management is the key to improving user experience and website value.Auto CMS (AutoCMS) is an efficient and flexible content management system that provides powerful functions to help us achieve this, especially in dynamic filtering and displaying article lists. The combination of template tags with URL parameters can easily build a highly customizable content presentation method.

This article will give a detailed introduction on how to use URL parameters and search keywords to dynamically filter and display your article list in the Anqi CMS, making your website content more interactive and practical.

一、Understanding the core mechanism of dynamic filtering

In AnQi CMS, dynamic filtering of article lists mainly relies on two core template tags:archiveList(Document list tag) andarchiveFilters(Document parameter filter tag), and combine with the query parameters (Query Parameters) in the URL.

When a user accesses a page in a browser, the URL may contain some parameters starting with “?”, such as/?category=技术&q=CMS. The files of AnQi CMS arearchiveListthe tag is very intelligent, when it is set to pagination mode (type="page"When it is set to auto, it will automatically recognize and apply these URL parameters to filter the displayed list of articles.This means that we do not need to write complex backend logic, we just need to use tags reasonably in the frontend template to achieve rich filtering functions.

二、Based on keyword quick search

The most common dynamic filtering method is to search by keywords. Visitors usually hope to quickly find relevant articles by entering keywords.

Implementation method:

  1. Build search form:Add a simple HTML search form at an appropriate location on the website (such as the navigation bar, sidebar), and the form's submission method should bemethod) should beGET，and the search box'snamethe attribute is usually set toq.

    <form method="get" action="/search">
    <div>
        <input type="text" name="q" placeholder="请输入搜索关键词" value="{{urlParams.q}}">
        <button type="submit">搜索</button>
    </div>
</form>
    • Hereaction="/search"points to the search result page template of your website (usually)search/index.html).
    • value="{{urlParams.q}}"can retain the keywords entered by the user after searching, enhancing the user experience.

  2. Display search results:Use in the template of the search results page (or other pages that need to display search results),archiveLista tag to specifytype="page". Anqi CMS will automatically read the URL in.qParameters, and filter the list of article titles containing the keyword according to its value.

    {% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <article>
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p>{{item.Description}}</p>
        <footer>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</footer>
    </article>
    {% endfor %}
    {# 配合分页标签显示分页 #}
    {% pagination pages with show="5" %}
        {# ... 分页链接代码 ... #}
    {% endpagination %}
{% endarchiveList %}

    In this way, when the user submits a search form or directly accesses a similaryourdomain.com/search?q=安企CMSURL,archiveListwill automatically display matching keywords articles.

3. Use built-in fields for filtering

In addition to keyword search, Anqi CMS also allows you to filter article lists through built-in fields (such as category ID, model ID, recommendation attributes, etc.).

Implementation method:

You can directly control it by adding the corresponding parameters in the URL.archiveListFilter behavior.

  • Filter by category ID: yourdomain.com/list?categoryId=1(Display articles with category ID 1)
  • Filter by model ID: yourdomain.com/list?moduleId=2Show articles with model ID 2, such as product models
  • Filter by recommended attributes: yourdomain.com/list?flag=cShow articles with recommended attribute "Recommended"

You can manually build these filter links in the template or automatically generate them in combination with navigation tags. For example, on a category list page, you can generate links withcategoryIdParameter link:

{% categoryList categories with moduleId="1" parentId="0" %}
    <ul>
        {% for item in categories %}
        <li><a href="{{ item.Link }}">{{item.Title}}</a></li>
        {% endfor %}
    </ul>
{% endcategoryList %}

In the document list page (archiveList type="page"), ifcategoryIdnot specified, it will automatically try to read the current page's category ID for filtering.

English translation: Through custom fields to achieve advanced dynamic filtering

This is the strength of the dynamic filtering of AnQi CMS, which allows you to create complex filters based on your defined article attributes (such as: region, property type, color, etc.).

Implementation steps:

  1. Preparation: Define custom fields in the content modelFirst, you need to go to the Anqi CMS backendContent Management -u003e Content Modelauto, For the article model you need to filter, add custom fields.For example, if your website is a real estate website, the article model may need to add fields such as 'Area' (single select/dropdown) and 'House Type' (multiple select).When adding a field, you can choose different field types (such as single-line text, numbers, single selection, multiple selection, dropdown selection, etc.), which will be provided for editors to fill in when the article is published.Especially the selection type field (single, multiple, dropdown), their option values will be used directly for filtering.

  2. Build the filter interface: usearchiveFilterstagsIn your article list page template, usearchiveFiltersTags are automatically generated based on these custom fields筛选选项。This tag will read the filter fields defined in your content model and generate a link with the corresponding URL parameters for each option.

    `twig

    <h4>筛选条件</h4>
{% archiveFilters filters with moduleId="1" allText="不限" %}
    {% for item in filters %}
    <ul class="filter-group">
        <li><strong>{{item.Name}}：</strong></li> {# 字段名称，如“地区” #}
        {% for val in item.Items %}