How to display a list of articles 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, easily handling the display of articles, products, or other custom content.When we need to display a content list on the website frontend and allow users to filter based on various conditions such as content model, category, recommendation attributes, etc., Anqi CMS provides very intuitive and powerful template tags to achieve these functions.

Flexible customization of content lists display, which not only enhances 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 the powerfularchiveListTag, it works with a series of parameters to help us build various complex and practical content lists.

archiveListTag: The cornerstone of content lists.

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 obtained data. For example, to display the five most recently published articles, you can write:

{% 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,archivesis our custom variable name used to store the list of obtained content.type="list"We want a simple list, not a paginated list, andlimit="5"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 on the backend, you can view or customize the ID and name of each content model.

Filter content list by category

The content of the website is usually organized into different categories.categoryIdParameters allow us to specify the content of one or several 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 (for example, 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 obtain articles under the current category on a category list page, you can omit it.categoryIdparameters,archiveListTags will automatically recognize the category ID of the current page. If you want to get articles under all top-level categories (not limited to specific categories), you cancategoryIdset0.

Filter content by recommended attributes

【en】The 'Recommended Attributes' feature of AnQi CMS allows us to tag articles with 'Headline[h]', 'Recommended[c]', 'Slider[f]', and other labels.These attributes 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 'Headline' content, you should set theflagparameter toflag="h"These recommended properties can be set on the "Content Management" -> "Publish Documents" page in the backend.

Keyword search and pagination

When a user searches on the website, we usually pass the search keywords through URL parameters (such as?q=搜索词).archiveListTags intype="page"mode, it will automatically read the parameters in the URL.qParameters as search keywords. CombinedpaginationTags, you 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>

Then, 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.qwill automatically retrieve theqparameter value from the current URL, which is used to display the default keyword in the search box.

Combine with custom fields for advanced filtering.

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 'Product Model', add fields such as 'Color', 'Size', etc.archiveFiltersLabel and URL query parameters.

archiveFiltersLabels are automatically generated with filtering conditions and corresponding URL links based on the filterable fields configured in your backend content model.

Suppose you 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.archiveListTags intype="page"In mode, it will intelligently read these URL query parameters and perform the corresponding filtering. The value of a custom field can be accessed directly through{{item.自定义字段名}}style