How to filter and display content on the article list page based on specific conditions (such as recommended attributes)?

In our website content operation, the article list page often plays an important display role.We do not want to simply arrange the content in a mechanical manner based on the publication time, but hope to be able to filter and display articles flexibly according to certain conditions, such as the importance of the content, popularity, or whether they are recommended.AnQiCMS (AnQiCMS) took these needs into consideration from the beginning of its design, providing us with a simple yet powerful content filtering mechanism.

Today, let's talk about how to filter and display content on the article list page of Anqi CMS based on specific conditions (such as "recommended attributes").

Step 1: Set the 'recommended attributes' for the article in the background

To allow the front-end list to filter articles based on the recommended attributes, we first need to tag these 'labels' for the articles in the background.

When you enter the AnQi CMS backend management interface, under the "Content Management" menu, select "Publish Document" or "Edit Document", you will see an option area named "Recommended Properties".This provides a variety of preset properties, such as 'headline[h]', 'recommend[c]', 'slide[f]', and so on.

These properties are like the 'identity markers' of an article.You can check one or more properties for the importance or display intent of the article.For example, an especially important article, you may check both 'Top News [h]' and 'Recommended [c]' at the same time.Of course, if an article does not require any special marking, it is also okay to leave it unchecked.

It is noteworthy that each attribute corresponds to a letter identifier (such as “recommended” corresponds toc，“top news” corresponds toh），this letter will be used for filtering in the front-end template.

The second step: flexibly call and filter content in the template

After setting up the background properties, the next step is to implement the filtering display in the website front-end template.The Anqi CMS uses a syntax similar to the Django template engine, which is very intuitive to use.archiveListThis powerful template tag.

archiveListTags are the core tools used to retrieve lists of articles.It supports various parameters, allowing us to retrieve content based on different conditions.flagParameter.

Assuming we want to display all articles marked as 'recommended[c]' in a specific area, such as the 'Editor's Recommendations' column on the homepage, we can write the template code like this:

{# 假设这里是你的“编辑推荐”模块 #}
<div class="editor-recommend-section">
    <h3>编辑推荐</h3>
    <ul>
        {# 使用 archiveList 标签来获取文章列表 #}
        {% archiveList recommendedArticles with moduleId="1" flag="c" order="id desc" limit="5" type="list" %}
            {% for item in recommendedArticles %}
            <li>
                <a href="{{ item.Link }}" title="{{ item.Title }}">
                    {# 如果文章有缩略图，我们当然希望它能显示出来 #}
                    {% if item.Thumb %}
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                    {% endif %}
                    <h4>{{ item.Title }}</h4>
                    <p>{{ item.Description|truncatechars:80 }}</p>
                    <span class="publish-date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                </a>
            </li>
            {% empty %}
            <li>
                抱歉，目前没有推荐文章。
            </li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

Let us simply decode this code:

  • archiveList recommendedArticles with ...: This is calling the article list tag and storing the obtained data inrecommendedArticlesthis variable.
  • moduleId="1": This parameter specifies the content of the 'article model'. If the recommendation attribute is set for the product, then this might bemoduleId="2"(or any custom model ID).
  • flag="c"This is the key to filtering based on the 'recommended [c]' attribute! It tells the system to only return articles marked as 'recommended'.
  • order="id desc": We can choose the sorting method for the articles, here it is in descending order by ID, which means the latest recommended articles will be at the top. You can also change it toorder="views desc"Show the most viewed recommended articles.
  • limit="5": We limit to show the latest 5 recommended articles.
  • type="list": It means we are just getting a simple list without pagination functionality. If pagination is needed, it can be set totype="page"and combiningpaginationlabel usage
  • {% for item in recommendedArticles %}: This is a loop, traversingrecommendedArticlesof each article's data.
  • {{ item.Link }},{{ item.Title }},{{ item.Thumb }},{{ item.Description }},{{ item.CreatedTime }}These are the built-in fields of the article, accessed byitem.the prefix directly.item.Description|truncatechars:80Used a filter to truncate the description length.stampToDateIs an AnQi CMS provided date formatting function, making time display more friendly.
  • {% empty %}: This is a very practical feature, whenrecommendedArticlesis empty (that is, there are no articles that meet the conditions), it will displayemptyBlock content.

More filtering combinations

In addition to simply filtering "recommended" articles, you can also flexibly combine other parameters:

  • Exclude specific attributes:If you want to display all articles except 'Top Stories', you can useexcludeFlag="h".
  • Filter recommended articles under specific categories:CombinecategoryIdparameters, for examplecategoryId="10" flag="c"which means only display recommended articles with category ID 10.
  • Display the recommended attribute itself:If you want to display the recommended attribute of the article in the list item (for example,archiveListaddshowFlag=trueparameter, and then use it in the loop.{{item.Flag}}to retrieve and display it.

Application based on actual scenarios

This filtering capability based on recommendation attributes is very useful in actual operation:

  1. Homepage of the website:Can set 'Today's Headlines', 'Editor's Choice', 'Slide Recommendations', and other modules, which are displayed through differentflagto show the corresponding content.
  2. Sidebar / Bottom Recommendations:“Popular Articles”, “Latest Recommendations”, and other areas can be utilizedflagandorderParameters such as sorting by views can easily achieve dynamic content display.
  3. Special topic page:When creating a special topic, you can mark specific articles within the topic with exclusive recommendation attributes, and then accurately call up these selected contents on the topic page.

Provided by Anqi CMSarchiveListThe tag and recommendation attribute feature allows us to easily build a rich, well-structured article list page, making website content operations more efficient and flexible.

Frequently Asked Questions (FAQ)

1. Can I filter articles with multiple recommended attributes in the same tag, such as both "Headline[h]" and "Recommended[c]"?archiveList标签中同时筛选多个推荐属性的文章，比如既要“头条[h]”又要“推荐[c]”？Of Security CMSarchiveListThe tag is inflagThe parameter is currently designed to support filtering only one recommended attribute per call. If you need to display articles that have both the "Top" and "Recommended" attributes, or need to display articles that contain "Top"orArticles with the "Recommended" attribute, you need to call separatelyarchiveListLabel, or set a completely new combination attribute for these articles in the background (if the business logic allows), but the more common and recommended practice is to use a singleflagThe parameter is used to retrieve a list of recommended content of a specific type.

2. How to directly display the recommended attribute next to the article title, such as '[Recommended] Anqi CMS Beginner's Guide'?This is achievable. InarchiveListAdd a tag, inshowFlag=trueThe parameter. So, when looping through article data, eachitemobject will contain aFlagfield, whose value is the recommended attribute letter of the article (for examplec). You can display it in the template like this:

{% archiveList articles with moduleId="1" limit="5" showFlag=true %}
    {% for item in articles %}
    <li>
        {% if item.Flag %}[{{ item.Flag }}]{% endif %}
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
    {% endfor %}
{% endarchiveList %}

You can even base it onitem.Flagto make conditional judgments based on the value, displaying friendlier text, such ascdisplaying as "Recommended", andhdisplaying as "Headline".

3. Is this filter function also applicable to product lists or other custom content models?Absolutely. Anqi CMS'archiveListThe tag is a generic content list tag, it passes throughmoduleIdSpecify the content model to operate. Whether it is an article, product, or any content type you customize through the "Content Model" feature, as long as you set the "recommended attributes" for these contents in the background, you can display them in the foreground bymoduleIdcooperateflagParameters are filtered and displayed. For example, to filter "Product Model" (