When the content of the website becomes increasingly rich, users often hope to find the information they are interested in more accurately, rather than searching for needles in a haystack among a pile of disordered content.For operators, providing flexible article list filtering functions can not only significantly improve user experience, but also effectively help users discover more related content, thereby increasing the time spent on the website and user interaction.

AnQiCMS deeply understands this need, through its highly flexible content model and powerful template tag system, making it extremely simple and intuitive to implement the parameter filtering function for article lists.Even custom properties can easily integrate into the filtering system, bringing endless possibilities for website content management and display.

Behind the scenes preparation: Define and manage your custom content properties

To implement article list filtering parameters, we first need to define the 'properties' available for filtering articles. In AnQiCMS, this is due to one of its core features—Flexible Content Model.

Imagine you are running a real estate information website. In addition to the traditional article title, content, and publish time, you may also need to add custom attributes such as 'property type' (such as residential, commercial, apartment), 'location', and 'apartment layout' (such as one-bedroom, two-bedroom, three-bedroom) for each property (that is, each article).

In AnQiCMS backend, you can easily set these custom properties by following these steps:

  1. Enter the content model management:Find "Content Management" under "Content Model" in the background navigation. AnQiCMS provides default article and product models, and you can also create new models as needed.
  2. Add custom fields:Select the model you need to add properties to (for example, "Article Model"), click edit to enter the model details.Here, you will see the 'Content Model Custom Field' area.Click 'Add field' to define new properties.
  3. Configuration field type:Select an appropriate field type for your custom properties.For example, the "house type" can be selected as "single choice" or "drop-down selectionThe property 'area' can be selected as a 'numeric' type.It is worth noting that the "parameter name" and "call field" are very critical for subsequent use in the template. It is recommended to use easily understandable English or pinyin as the "call field", as it will serve as the variable name in the template.
  4. Save and apply:After adding custom fields, save the content model. After that, when you publish or edit articles under this model, you will be able to see and fill in these new custom properties.

These custom properties are the foundation for our implementation of article list filtering. They make your content more structured and provide users with more refined search dimensions.

Front-end Presentation: Clever Use of Filter Tags in Templates

After defining custom properties in the background and filling in the data for the article, the next step is to display these filtered options on the website front-end and allow the article list to change dynamically based on user selections. AnQiCMS provides two powerful template tags to perfectly meet this need: archiveFiltersandarchiveList.

archiveFiltersLabel: Generate filter options

archiveFiltersThe responsibility of the label isGenerate clickable filter conditions。It will automatically read all available custom filter fields and their corresponding values according to the content model you specify, and then generate a link with filtering parameters for each value.

For example, to generate a 'House Type' and 'Layout' filter menu on the article list page of your real estate website, you can use it in the template like thisarchiveFilters:

<div class="filter-area">
    {% archiveFilters filters with moduleId="你的文章模型ID" allText="不限" %}
        {% for item in filters %}
        <div class="filter-group">
            <span class="filter-label">{{item.Name}}: </span>
            <ul class="filter-options">
                {% for val in item.Items %}
                <li class="{% if val.IsCurrent %}active{% endif %}">
                    <a href="{{val.Link}}">{{val.Label}}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
    {% endfor %}
    {% endarchiveFilters %}
</div>

Here:

  • moduleId="你的文章模型ID"Tell AnQiCMS which content model you want to generate a filter for (for example, the article model is usually1).
  • allText="不限"Define the display text for the "All" option.
  • filtersThe variable will contain a list where eachitemrepresents a selectable custom field (such as “House Type”), itsNameis the Chinese name of the field.FieldNameis the English identifier of the field.
  • Eachitem.ItemsIt is a sublist containing all optional values for the field (such as “Residential”, “Commercial”)).val.Labelis the display name,val.Linkis the URL that is redirected to after clicking,val.IsCurrentIt can help you add the current selected filter conditions.activestyles can be added.

archiveListTag: Dynamically respond to filter results.

archiveListTags are used forDisplay the list of articles on the page.Its strength lies in, when combined withtype="page"参数结合使用时，它能智能地自动识别并响应 URL 中的筛选参数，从而动态地调整显示的文章内容。这意味着，你无需在archiveListLabel manually passedarchiveFiltersGenerated filter values, AnQiCMS will automatically complete the match.

Continuing with the real estate website example, you can write the article list section like this:

<div class="article-list">
    {% archiveList archives with moduleId="你的文章模型ID" type="page" limit="10" %}
        {% for item in archives %}
        <div class="article-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            {%- archiveParams params with id=item.Id %}
            {%- for param in params %}
                {%- if param.FieldName == "房屋类型" %} {# 假设你的自定义字段调用字段是"房屋类型" #}
                <span>房屋类型: {{param.Value}}</span>
                {%- endif %}
                {%- if param.FieldName == "面积" %} {# 假设你的自定义字段调用字段是"面积" #}
                <span>面积: {{param.Value}} 平方米</span>
                {%- endif %}
            {%- endfor %}
            {%- endarchiveParams %}
            <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        </div>
        {% empty %}
        <p>抱歉，没有找到符合条件的房产信息。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 分页功能同样无缝衔接 #}
    {% pagination pages with show="5" %}
        <div class="pagination-controls">
            <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 page in pages.Pages %}<a class="{% if page.IsCurrent %}active{% endif %}" href="{{page.Link}}">{{page.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>
        </div>
    {% endpagination %}
</div>

Here:

  • moduleIdEnsure that we are getting the correct content model article.
  • type="page"Enabled pagination mode, also allowingarchiveListto listen to the filtering parameters in the URL.
  • limit="10"control the number of articles displayed per page.