How to filter and display content in AnQiCMS template based on the article's 'recommended attributes' (such as headline, slideshow)?

In website content operation, displaying carefully selected high-quality content in an eye-catching way to users is a key link to improve user experience, guide reading behavior, and achieve operation goals.AnQiCMS (AnQiCMS) fully understands this and provides a flexible and powerful "recommended feature" function, making content filtering and display simple and efficient.By setting different recommendation attributes for articles, we can accurately present specified types of content in various areas of the website, whether it is the headline news on the homepage or the stunning images in the carousel, it can be easily achieved.

Deeply understand the "recommended attributes" of Anqi CMS

The AnQi CMS allows us to assign one or more 'recommended attributes' to each article, which are like tags for the content, used to identify their special display priority or type.When editing articles in the background, you will see a "Recommended Properties" option, which includes various preset property tags. For example,头条[h]usually used for the most important news or announcements,幻灯[f]while often used for image content that needs to be displayed in large areas, and推荐[c]Can be used to mark regular high-quality articles. These properties' letter codes (such ash,f,c) are the key to filtering content in the template.

These properties are very intuitive, you can flexibly check one or more properties based on the importance of the article or its expected display form on the page.For example, an article that is both a headline and needs to appear in a slide in the form of an image can check both the "Headline" and "Slide" properties at the same time.

Core operation: usearchiveListTag filtering content

In the template design of AnQi CMS,archiveListTags are the core tools for filtering and displaying article content. They have rich parameters, allowing us to accurately obtain the desired content based on various conditions. Among them,flagThe parameter is specifically used to identify and filter articles with specific recommended attributes.

When we need to call articles with specified recommended attributes in the template,archiveListThe basic usage of the tag is like this:

{% archiveList archives with flag="h" limit="5" %}
    {# 在这里循环显示文章内容 #}
{% endarchiveList %}

In this code block:

• archivesThis is a custom variable name used to store the filtered list of articles.
• flag="h"It indicates that the system should only filter out articles marked as "Top Stories".
• limit="5"It limits the maximum display to 5 articles.

exceptflag,moduleIdandcategoryIdParameters are often combined with recommendation attributes to further filter recommended content under specific content models or categories.For example, you may only want to display 'Headlines' articles under the 'News Information' module, or 'Recommended' products under the 'Product Center' category.

Sometimes, you may need to display all content except for some recommended properties. In this case,excludeFlagthe parameters come into play. For example,excludeFlag="h"Exclude all articles marked as 'Top News', thus displaying other types of articles in a certain area.

Case Study: Diversified content display.

Let's go through several specific examples to see how to applyarchiveListTags and recommended properties to create different content display areas on the website.

1. Homepage headline news area

On the homepage of the website, there is usually an area dedicated to displaying the most important news. We can mark these articles as头条[h]Property.

<div class="headline-news">
    <h3>头条新闻</h3>
    <ul>
        {% archiveList topHeadlines with flag="h" moduleId="1" limit="5" order="id desc" %}
            {% for item in topHeadlines %}
                <li>
                    <a href="{{ item.Link }}" title="{{ item.Title }}">
                        <h4>{{ item.Title }}</h4>
                        <p>{{ item.Description|truncatechars:80 }}</p>
                    </a>
                </li>
            {% empty %}
                <li>暂无头条新闻。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

This code will retrieve from the article modelmoduleId="1"in, sorted by the most recent publications(order="id desc"Sort in order and filter out up to 5 articles with the 'headline' attribute, and display their titles, links, and summaries.{% empty %}Tags ensure that the page can display friendly prompt information when no matching articles are found.

2. Homepage slider/carousel

The slide area usually needs a prominent large image and a concise title. We can mark the articles that need to be displayed in a carousel as幻灯[f]properties, and ensure that the cover image of the article has been uploaded.

<div class="main-carousel">
    <ul class="slides">
        {% archiveList carouselItems with flag="f" moduleId="1" limit="4" order="id desc" %}
            {% for item in carouselItems %}
                <li>
                    <a href="{{ item.Link }}" title="{{ item.Title }}">
                        {% if item.Logo %}
                            <img src="{{ item.Logo }}" alt="{{ item.Title }}" />
                        {% endif %}
                        <div class="carousel-caption">
                            <h3>{{ item.Title }}</h3>
                        </div>
                    </a>
                </li>
            {% empty %}
                <li>暂无幻灯内容。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

Here, we filtered 4 articles with the 'slide' attribute and displayed their cover images (item.Logo) and titles. Please note, item.LogoUsed to obtain the cover image of the article, which is very practical for slide show presentations.

3. Recommended article list (excluding headlines)

Sometimes, we hope to display "More Recommendations" content at the bottom of a sidebar or content, but we don't want it to be repetitive of the "Headline" content on the homepage. In this case, you can useexcludeFlag.

<div class="recommended-articles">
    <h3>更多推荐</h3>
    <ul>
        {% archiveList moreRecommendations with excludeFlag="h" moduleId="1" limit="6" order="views desc" %}
            {% for item in moreRecommendations %}
                <li>
                    <a href="{{ item.Link }}" title="{{ item.Title }}">
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
                        <span>{{ item.Title }}</span>
                    </a>
                </li>
            {% empty %}
                <li>暂无推荐文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

This code will exclude all "top headlines" articles from the article model, then display 6 of the most viewed articles (order="views desc") of other recommended articles, showing their thumbnails (item.Thumb) and titles.

Content display strategy and **practice

• Flexible combination of use:flagThe parameter can accept a single or multiple recommended attributes, such asflag="c,f"The articles will simultaneously filter out "recommended" and "slide" articles. You can achieve fine-grained content distribution according to your actual needs by combining or using properties individually in different areas.
• The importance of backend management: Ensure that content editors can accurately and consistently set recommended properties when publishing or updating articles.Clear recommendation attribute usage specifications are the foundation for the front-end template to correctly and effectively display content.
• Optimizing sorting and quantity: Besidesflag, Making reasonable use oforder(such asid descThe latest,views descHottest,sort descSorted manually in the background) andlimitParameters, which can better control the priority and quantity of content presentation, to avoid information overload.
• Enhancing user experience: By precise content recommendation, it can effectively reduce the bounce rate of users, extend the time users stay on the website, and guide them to discover more interesting content.
• SEO-friendly: Reasonably highlight key content, which also helps search engines understand the core information of the website and enhance the weight of important pages.

The 'Recommended Attributes' feature of AnQi CMS provides great convenience and flexibility for website content operation. By masteringarchiveListtags and theirflagParameter usage, you can easily handle the website content stream, allowing your high-quality content to reach users at the right time, in the right place, and in the right form.

Frequently Asked Questions (FAQ)

Q1: Can an article have multiple recommended attributes? If multiple are set, how does the template filter?

Yes, an article can have multiple recommended attributes at the same time, for example, an article can be both a "headline" and a "slideshow". In the template,archiveListlabel'sflagthe parameter can accept a single attribute (such asflag="h"）or a combination of properties（such asflag="h,f"）。When you specifyflag="h,f"the system will filter out all items containing the attribute "h"orArticles containing the 'f' attribute. If you want to filter articles that contain all specified attributes, you will need to implement it based on the specific template engine features and custom logic, but usuallyflagThe parameter is an "OR" relationship.

Q2: Besides recommended attributes, what other parameters can help me filter content more accurately?

exceptflagRecommended attributes,archiveListThe tag also provides multiple powerful filtering parameters. For example,moduleIdYou can specify from which content model (such as article model, product model) to obtain content;categoryIdYou can limit the display to specific categories only；orderParameters can control the sorting method of the content (such as by publish time, views, or custom sorting by the backend)；limitThe parameter is used to control the number of displayed contents. Flexible combination of these parameters can achieve very precise content filtering.

Q3: What will be displayed on the page if an area does not have any articles that meet the recommended properties?

InarchiveListlabel'sforIn the loop, you can use it in conjunction with{% empty %}tags to handle cases with no content. For example,{% for item in archives %} ... {% empty %} <li>暂无内容。</li> {% endfor %}. WhenarchivesWhen the list is empty, the system will render{% empty %}Ensure that the content within the tag does not appear blank or erroneous, enhancing user experience.