How to build a list page of articles with filtering conditions, such as filtering by custom properties?

As an experienced CMS website operation person, I know how to meet user needs through refined content presentation.Build a list page of articles with filtering conditions, especially filtering on custom properties, is an important means to improve user experience and help users quickly find the information they need.AnQi CMS with its flexible content model and powerful template tags makes this process efficient and intuitive.

Build a list page of articles filtered by custom attributes, mainly involving the following core steps: First, define and configure these custom attributes in the background management system; second, use the tags provided by Anqi CMS in the front-end template to generate the user interface for filtering conditions; finally, display the filtered content through the article list tag and combine it with pagination to provide a complete browsing experience.

Configure custom content model and filter properties

To implement article filtering by custom attributes, the first step is to define these custom attributes in the Anqi CMS backend.The flexible content model of AnQi CMS is the foundation for this feature.

You need to navigate to the "Content Management" module on the backend and then click on the "Content Model".Here, you can choose to edit an existing content model (such as "article model") or create a new one to meet specific business needs.In the content model editing interface, you can add 'Custom fields of content model'.These fields will serve as additional attributes for your article.

Add custom fields and clearly specify the "parameter name" as the display and management name in the background, and the "reference field" as the unique identifier used in the front-end template (it is recommended to use English lowercase letters, such ashouseTypeorregion), and the most important "field type". To implement the filtering function, we usually choose among "single selection", "multiple selection", or "drop-down selection".When selecting these types, you need to enter all possible options line by line in the "default value" (for example, for house types, you can enter "residential", "shop", "apartment", and so on;For the area, you can enter 'downtown', 'suburb', 'development zone', etc.).These predefined options will be used directly for generating front-end filter conditions.After defining the field, save the content model and select or fill in the corresponding custom attribute values when publishing or editing an article.

Build the user interface for front-end filtering conditions

After defining custom properties and adding the corresponding data to the article, we need to build a filtering function in the article list page template. Anqi CMS providesarchiveFiltersLabels for conveniently generating these filtering conditions.

Firstly, you need to determine the template file corresponding to your article list page. According to Anqi CMS's convention of 'template directory and template', it is usually located at/template/您的模板目录/{模型table}/list.htmlThe file. You can use thearchiveFilterstag to get and render the filtering conditions.

For example, if you want to generate a filter condition for a document with model ID 1 (usually the article model), you can do it like thisarchiveFiltersTags:

{# 参数筛选代码区域 #}
<div>
    <div class="filter-title">筛选条件：</div>
    {% archiveFilters filters with moduleId="1" allText="不限" %}
        {% for item in filters %}
        <ul class="filter-group">
            <li class="filter-name">{{item.Name}}: </li>
            {% for val in item.Items %}
            <li class="filter-item {% if val.IsCurrent %}active{% endif %}">
                <a href="{{val.Link}}">{{val.Label}}</a>
            </li>
            {% endfor %}
        </ul>
        {% endfor %}
    {% endarchiveFilters %}
</div>

In this code block,moduleId="1"We specified the filter we want to generate for the article model.allText="不限"It sets the display text for the 'All' option of each filter group.filtersThe variable contains all the custom attribute groups that can be filtered, eachitemRepresents a custom attribute (such as "House Type").item.ItemsThese are all the optional values under the attribute (such as "Residential", "Commercial").val.LinkAn automatic URL with the corresponding filter parameters will be generated, click to submit the filter request.val.IsCurrentIt is used to determine whether the current option is selected, so that it can be highlighted on the interface.Through such a structure, users can clearly see all the filtering dimensions and their optional values, and can filter by clicking on the link.

Display the filtered article list and pagination.

After the filter condition is generated, the next step is to display the actual list of articles. It is AnQi CMS'sarchiveListTags can intelligently identify the filter parameters in the URL and return the filtered articles accordingly.

In the same list page template, immediately following the filter conditions, you can addarchiveListLabels to display articles. When the user clicks the filter link, the page URL will carry custom attribute parameters,archiveListLabels will automatically read these parameters and filter the content without the need for additional coding processing:

{# 文章列表区域 #}
<div class="article-list-container">
{% archiveList archives with moduleId="1" type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <a href="{{item.Link}}">
            <h3 class="article-title">{{item.Title}}</h3>
            {% if item.Thumb %}
            <img class="article-thumb" alt="{{item.Title}}" src="{{item.Thumb}}">
            {% endif %}
            <p class="article-description">{{item.Description}}</p>
            <div class="article-meta">
                <span class="category-name">所属分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span class="publish-date">发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span class="views-count">阅读量：{{item.Views}}</span>
            </div>
        </a>
    </div>
    {% empty %}
    <div class="no-content-message">
        抱歉，该筛选条件下暂无文章内容。
    </div>
    {% endfor %}
{% endarchiveList %}

    {# 分页代码区域 #}
    <div class="pagination-container">
        {% pagination pages with show="5" %}
            <a class="pagination-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
            {% if pages.PrevPage %}
            <a class="pagination-link" href="{{pages.PrevPage.Link}}">上一页</a>
            {% endif %}
            {% for item in pages.Pages %}
            <a class="pagination-link {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
            {% endfor %}
            {% if pages.NextPage %}
            <a class="pagination-link" href="{{pages.NextPage.Link}}">下一页</a>
            {% endif %}
            <a class="pagination-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
        {% endpagination %}
    </div>
</div>

InarchiveListTagged,moduleId="1"The article model was specified again.type="page"Indicates that this is a paged list, whilelimit="10"Then, the number of articles displayed per page was set.archivesThe variable contains all the article data on the current page, you can iterate through it and displayitemthe fields to show the article title, link, description, thumbnail, and publication time information.

At the same time, we combined the use ofpaginationtags to generate pagination navigation.pagesThe variable contains all the information needed for pagination, including the total number of pages, the current page, the first page, the last page, the previous page, the next page, and the list of page numbers in the middle.show="5"Parameters control the display quantity of middle page number links. Users can browse through the filtered results using these links.

By following these steps, you will be able to successfully build a feature-rich, user-friendly article list page on the Anqi CMS with custom attribute filtering conditions.This has not only improved the organization of website content, but also greatly improved the efficiency of users in finding information.

Frequently Asked Questions

Q1: But I defined custom properties,archiveFiltersWhy are these filter conditions not displayed in the tag?

A: First make sure that when you add a custom field in the "Content Model", you set its "Field Type" to "Single Selection", "Multiple Selection", or "Dropdown Selection". These three types of data arearchiveFiltersLabels can recognize and generate filtering conditions. Secondly, please confirm that your article has indeed filled in and saved the values of these custom attribute values and thatarchiveFilterslabel'smoduleIdThe parameter matches the model ID of the article you belong to.

Q2: After clicking the link of the filter condition, the page does not change, or the article list does not update according to the filter conditions. How should I investigate?

A: In this case, you need to check a few points. First, confirm that your website's static rule is configured correctly, because filtered links are usually presented in the form of URL query parameters (such as?region=cityCenterIf the pseudo-static configuration is not set up properly, these parameters may not be parsed correctly. You can checkhelp-plugin-rewrite.mdconfirm the pseudo-static rules in the document. Next, make sure that inarchiveListTagged,typethe parameter to"page", because it is only available in pagination mode,archiveListIt will automatically handle the filtering parameters in the URL. Finally, if the problem still exists, check the network requests in the browser developer tools to see if the filtering link is sent correctly and if the backend returns data as expected.

Q3: How can the custom filter condition support multiple selections at the same time?

A: Safe CMS ofarchiveFiltersThe filter link generated by the tag will be based on a single value.If you set the field type to 'Multiple Choice' in the content model, the user will usually click on a filter value to apply the condition in the frontend template.In order to implement complex filtering logic similar to 'multiple selection' (for example, to filter both 'residential' and 'apartment'), it usually requires capturing the user's multiple selections on the frontend, then dynamically building a URL with multiple parameters (for example,?houseType=住宅&houseType=公寓), or encode multiple selection values into a single parameter (for example,?houseType=住宅,公寓)，then submit it to the background. Security CMS.archiveListThe tag can handle queries with multiple same-named field parameters in the URL. You just need to make sure that the URL format generated by the front-end is correct.