How to display an article list on the front end and support filtering by content model, category, recommendation attributes, and other conditions?

AnQi CMS provides extremely high flexibility for website content, whether it is displaying articles, products, or other custom content, it can easily cope with it.When we need to display a content list on the front end of a website and allow users to filter based on content model, category, recommendation attributes, and other conditions, Anqi CMS provides very intuitive and powerful template tags to achieve these functions.

Flexible customization of the list display, which not only improves user experience but also effectively helps visitors quickly find the information they are interested in. The core tool for achieving this goal in Anqi CMS is powerfularchiveListA tag that works with a series of parameters to help us build various complex and practical content lists.

archiveListTag: The foundation of a content list.

archiveListTags are the main way we call articles, products, or other document lists on the front end. Its basic usage is to wrap in{% archiveList ... %}and{% endarchiveList %}between, throughforLoop through the data obtained. For example, to display the five most recently published articles, you can write as follows:

{% archiveList archives with type="list" limit="5" %}
    {% for item in archives %}
        <div class="article-item">
            <a href="{{item.Link}}">
                <img src="{{item.Thumb}}" alt="{{item.Title}}" />
                <h3>{{item.Title}}</h3>
                <p>{{item.Description}}</p>
                <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量：{{item.Views}}</span>
            </a>
        </div>
    {% empty %}
        <p>目前还没有内容发布。</p>
    {% endfor %}
{% endarchiveList %}

here,archivesIt is a custom variable name we use to store the list of obtained content.type="list"It indicates that we want a simple list, not a paginated list, andlimit="5"which limits the number of displayed items.

filter content by content model

The "Content Model" feature of AnQi CMS allows us to customize different content structures according to business needs, such as articles, products, cases, etc. To display a list under a specific content model on the front end, you can usemoduleIdParameter.

Assuming the "article model" ismoduleIdis 1, the "product model" ismoduleIdis 2. If we only want to display the content under the "article model":

{% archiveList articles with type="list" moduleId="1" limit="10" %}
    {# 循环并展示文章内容 #}
{% endarchiveList %}

If we want to display the content under the "product model":

{% archiveList products with type="list" moduleId="2" limit="8" %}
    {# 循环并展示产品内容 #}
{% endarchiveList %}

Through the 'Content Management' -> 'Content Model' page, you can view or customize the ID and name of each content model.

Filter the content list by category

Website content is usually organized into different categories.categoryIdParameters allow us to specify the content of one or more categories to be displayed.

For example, to display all articles under the category with ID 1:

{% archiveList catArticles with type="page" categoryId="1" limit="10" %}
    {# 循环并展示该分类下的文章 #}
{% endarchiveList %}

If you want to display the content of multiple categories (such as ID 1 and 3), you can write it like this:

{% archiveList multiCatArticles with type="page" categoryId="1,3" limit="10" %}
    {# 循环并展示多个分类下的文章 #}
{% endarchiveList %}

If you want to automatically get the articles under the current category on a category list page, you can omit it.categoryIdparameter,archiveListThe label will automatically identify the category ID of the current page. If you want to get articles under all top-level categories (no specific category), you cancategoryIdis set to0.

Filter content by recommended attributes

The Anqi CMS provides the "recommended attribute" feature, allowing us to tag articles with These properties are very suitable for displaying important content on the homepage or in specific areas.flagParameters are used to filter these recommended contents.

For example, to display articles marked as "recommended":

{% archiveList recommendedArticles with type="list" flag="c" limit="5" %}
    {# 循环并展示推荐文章 #}
{% endarchiveList %}

If you want to display "top news" content, you willflagparameter toflag="h"These recommended properties can be set on the "Content Management" -> "Publish Document" page in the background.

Keyword search and pagination

When a user searches on a website, we usually pass the search keywords through URL parameters (such as?q=搜索词).archiveListThe tag is intype="page"mode, it will automatically read the URL parametersqas the search keywords. Combined withpaginationLabel, can easily implement a paginated search results list.

Firstly, on the search page (usually)search/index.htmltemplate), you need a search form:

<form method="get" action="/search">
    <input type="text" name="q" placeholder="请输入关键词" value="{{urlParams.q}}" />
    <button type="submit">搜索</button>
</form>

Next, in the search results area usearchiveListandpagination:

{% archiveList searchResults with type="page" limit="10" %}
    {% for item in searchResults %}
        <div class="search-result-item">
            <a href="{{item.Link}}">
                <h3>{{item.Title}}</h3>
                <p>{{item.Description}}</p>
            </a>
        </div>
    {% empty %}
        <p>没有找到相关内容。</p>
    {% endfor %}
{% endarchiveList %}

<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 分页链接的渲染 #}
        {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
        {% for pageItem in pages.Pages %}
            <a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
        {% endfor %}
        {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
    {% endpagination %}
</div>

here,urlParams.qIt will automatically retrieve the parameters in the current URL.qThe parameter value is used to display the default keyword in the search box.

Advanced filtering is performed by combining custom fields.

The 'Content Model' of AnQi CMS not only allows us to define common fields such as article titles and content, but also adds unique 'custom fields' for each model.For example, add fields such as 'Color' and 'Size' to the 'Product Model'.It is necessary to use it on the front end to implement the filtering of these custom fieldsarchiveFiltersTags and URL query parameters.

archiveFiltersThe label is automatically generated based on the filterable fields configured in your backend content model, along with corresponding URL links.

Assuming you have defined "Color" and "Size" as custom fields in the product model:

{# 生成筛选条件 #}
<div>
    <h3>筛选条件：</h3>
    {% archiveFilters filters with moduleId="2" allText="不限" %}
        {% for filterItem in filters %}
            <p>{{filterItem.Name}}:</p>
            <ul>
                {% for option in filterItem.Items %}
                    <li class="{% if option.IsCurrent %}active{% endif %}">
                        <a href="{{option.Link}}">{{option.Label}}</a>
                    </li>
                {% endfor %}
            </ul>
        {% endfor %}
    {% endarchiveFilters %}
</div>

{# 根据筛选条件显示产品列表 #}
{% archiveList products with type="page" moduleId="2" limit="9" %}
    {% for item in products %}
        <div class="product-item">
            <h4>{{item.Title}}</h4>
            <p>颜色: {{item.color}}</p> {# 假设自定义字段名为color #}
            <p>尺寸: {{item.size}}</p> {# 假设自定义字段名为size #}
        </div>
    {% endfor %}
{% endarchiveList %}

<div class="pagination-area">
    {% pagination pages with show="5" %}{# ...分页代码... #}{% endpagination %}
</div>

In the above example,archiveFiltersIt will generate something like:/products?color=红色or/products?color=红色&size=Lsuch a filter link.archiveListThe tag is intype="page"In this mode, it will intelligently read these URL query parameters and perform the corresponding filtering. The value of a custom field can be directly accessed through{{item.自定义字段名}}the way