How to dynamically filter and display a list of articles through URL parameters or search keywords?

Today, with the increasingly refined content management, how to make your website content smarter and more considerate in serving visitors is the key to improving user experience and website value.AnQiCMS (AnQiCMS) 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 style.

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

Understand 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 tags), and combine with the query parameters in the URL.

When a user visits a page in a browser, the URL may contain some parameters starting with “?” such as/?category=技术&q=CMS. Anqi CMS'sarchiveListThe tag is very smart, when it is set to pagination mode (type="page"It automatically recognizes and applies these URL parameters to filter the list of displayed articles.This means that we do not need to write complex backend logic, just by reasonably using tags in the frontend template, we can achieve rich filtering functions.

Based on keyword-based 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 a search form:Add a simple HTML search form at an appropriate location on the website (such as the navigation bar, sidebar), and the form submission method should be:method}GETand the search box'snameproperty 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 results page template of your website (usuallysearch/index.html)
   • value="{{urlParams.q}}"can retain the keywords entered by the user after searching, improving user experience.

2. Display search results:In the template of the search results page (or any other page that needs to display search results), usearchiveListlabel and specifytype="page". Anqi CMS will automatically read the URL parameter ofqParameters, and filter the list of article titles containing the keyword based on 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 similaryourdomain.com/search?q=安企CMSURL, thearchiveListIt will automatically display articles matching the keywords.

3. Use built-in fields for filtering.

In addition to keyword search, Anqi CMS also allows you to filter the article list 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=2(Display articles with model ID 2, such as product models)
• Filter by recommended attributes: yourdomain.com/list?flag=c(Display articles with the recommended attribute 'Recommended')

You can manually build these filter links in the template or automatically generate them with navigation tags. For example, on a category list page, you can generate links with each subcategory havingcategoryIdParameter 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 category ID of the current page for filtering.

Four, achieve advanced dynamic filtering through custom fields

This is the powerful feature of Anqi CMS dynamic filtering, which allows you to create complex filters based on the article attributes you define (such as region, property type, color, etc).

Implementation steps:

1. Preparation: Define custom fields in the content modelFirstly, you need to go to the Anqi CMS backendContent Management -> Content ModelIn, add custom fields to the article model you need to filter.For example, if your website is a real estate website, you may need to add fields such as 'Region' (single select/dropdown) and 'House Type' (multiple select) in the article model.When adding fields, 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 filtering interface: usearchiveFiltersTagIn your article list page template, usearchiveFiltersThe label is automatically generated based on these custom field options.This tag will read the filter fields defined in your content model and generate links with corresponding URL parameters.

   `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 %}