How to use the AnQiCMS recommendation attribute (flag) to filter and display specific content, such as "headline" or "slideshow"?

AnQiCMS provides a flexible recommendation attribute (flag) mechanism that allows website operators to easily filter and highlight specific content, whether it's the 'Top News' on the website homepage, the 'Slideshow' in the carousel, or other 'Recommended' content that needs special attention.This feature greatly enhances the efficiency of content operation and the richness of website content.

Understand recommendation attributes: Apply "exclusive tags" to content

Imagine that you have published many excellent articles and product information, but there are always some that are the most important, most popular, or need to be displayed in specific locations.The recommended attribute of Anqi CMS is a set of 'tags' system created for this purpose.It allows you to add one or more special tags to the content outside of the usual categories and labels.

These recommended properties are called "flag" in the background, and they are represented by a simple letter to indicate different types of recommendations. Currently, AnQi CMS supports the following commonly used recommendation properties:

• Headline[h]: Usually used to display the most important and eye-catching news or articles.
• Recommended[c]: Indicates that the content is recommended high-quality content by the editor.
• Slide[f]: Designed specifically for the homepage or specific area carousel (slideshow).
• Featured[a]: Different from ordinary recommendations, used for special recommended content.
• Scrolling[s]: Suitable for news scrollbars, marquee displays, and other content that needs to be scrolled.
• Bold[h]: This is a repeated marker that may emphasize the visual importance of the content title semantically.
• Image[p]: Emphasize that the content contains high-quality images, which may be used in photo specials or albums.
• Jump[j]: Identifies the content that will jump to an external link or specified page when clicked.

By these properties, we can finely control the display form and priority of content on the front-end page.

Set recommended properties for content in the background.

It is very intuitive to set recommendation attributes for content. When you edit or publish a document in the Anq CMS backend, on the "Add Document" or "Edit Document" page, you will see an option called "Recommendation Attributes".

Here, you can select one or more recommended attributes based on the characteristics of the content and your operational needs. For example, if you want to display a newly released product information on the home page slider area and also mark it as editor 'recommended', you can check them at the same time.幻灯 [f]and推荐 [c].

The flexibility of Anqi CMS is reflected in the fact that you can set multiple recommended attributes for the same piece of content, which means that a piece of content can be both a "headline" and a "slider", displayed in different front-end areas.

Filter and display specific content in the front-end template

After setting up the recommended properties, the next step is to filter and display content in the front-end template of the website based on these properties. This is mainly achieved byarchiveListTemplate tags can be used to achieve this.

archiveListTags are the core tools in AnQi CMS used to obtain document lists, providing rich parameters to help us precisely control the acquisition of content. Among them,flagThe parameter is used to specify the recommended attributes we want to filter.

It should be noted that in a singlearchiveListTag call in progress,flagA parameter can only specify one property letter. This means that if you want to display the content of both "Headline" and "Slide" at the same time, you need to use two separatearchiveList.

Below, let's look at how to operate with some examples:

Example one: Display 'Top News' on the homepage

Assume you want to display 5 of the latest "headlines" prominently on the home page of the website.

<div class="headline-news">
    <h2>头条新闻</h2>
    <ul>
        {% archiveList headlines with flag="h" limit="5" order="id desc" %}
            {% for item in headlines %}
                <li>
                    <a href="{{ item.Link }}">
                        <h3>{{ item.Title }}</h3>
                        <p>{{ item.Description | truncatechars:80 }}</p> {# 截取前80个字符作为简介 #}
                    </a>
                </li>
            {% empty %}
                <li>暂无头条新闻。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

In this example:

• flag="h"Tell the system to only retrieve content marked as "headline".
• limit="5"Limit to displaying only the latest 5 articles.
• order="id desc"Make sure to get the latest released (ID in descending order).
• item.Linkanditem.TitleUsed to display the link and title of the article.
• item.Description | truncatechars:80It will display the article summary and truncate it to 80 characters.
• {% empty %}It is a very practical grammar, when the front end does not match the content, it will display “No headline news.”.

Example two: Create the “slideshow” carousel on the homepage.

If we need to display 3 slides at the top of the homepage, these slides usually contain images and links.

<div class="main-slider">
    <div class="swiper-wrapper">
        {% archiveList slides with flag="f" limit="3" order="id desc" %}
            {% for item in slides %}
                <div class="swiper-slide">
                    <a href="{{ item.Link }}">
                        {% if item.Thumb %}
                            <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                        {% else %}
                            <img src="/public/static/images/default-slide.jpg" alt="默认幻灯片"> {# 假设有个默认图 #}
                        {% endif %}
                        <div class="slide-caption">{{ item.Title }}</div>
                    </a>
                </div>
            {% empty %}
                <div class="swiper-slide">暂无幻灯片内容。</div>
            {% endfor %}
        {% endarchiveList %}
    </div>
    <!-- Add Pagination, if required -->
    <div class="swiper-pagination"></div>
</div>

Here:

• flag="f"Explicitly indicates that we only get content marked as 'slides'.
• item.ThumbUsed to display the thumbnail for content settings, which is usually the main image for slides.item.LogoIt can also be used in some cases.
• We also added a judgment, ifitem.ThumbIf not found, display a default image to ensure the page is aesthetically pleasing.
• The specific slide carousel effect usually requires coordination with a front-end JavaScript library (such as Swiper.js) to implement, and here only the content acquisition method is displayed.

Example three: Display recommended products under a specific category

In addition to the homepage, we can also display products marked as 'recommended' under a specific category page.

{% categoryDetail currentCategory with name="Id" %} {# 获取当前分类ID #}
<div class="recommended-products">
    <h3>本分类推荐产品</h3>
    <div class="product-grid">
        {% archiveList recommendedProducts with moduleId="2" categoryId=currentCategory flag="c" limit="4" order="sort desc" %}
            {% for item in recommendedProducts %}
                <div class="product-item">
                    <a href="{{ item.Link }}">
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                        <h4>{{ item.Title }}</h4>
                        <p class="price">¥ {{ item.Price }}</p> {# 假设产品模型有Price字段 #}
                    </a>
                </div>
            {% empty %}
                <p>当前分类暂无推荐产品。</p>
            {% endfor %}
        {% endarchiveList %}
    </div>
</div>

In this scenario:

• We first pass through{% categoryDetail currentCategory with name="Id" %}Got the ID of the current category.
• moduleId="2"Ensure that we only get the content under the 'Product Model' (assuming the Product Model ID is 2).
• categoryId=currentCategoryLimit the content to the current category.
• flag="c"Filter products marked as "Recommended".
• item.PriceDisplays the price in the product custom fields, enriching the product information.

Through these flexible combinations, AnQi CMS's recommended attribute feature makes content presentation more intelligent and personalized.It not only improved the content exposure, but also provided users with more accurate and valuable information.

Frequently Asked Questions (FAQ)

Can I set multiple recommendation attributes for a content at the same time?Yes, Anqi CMS allows you to select multiple recommended attributes for the same document. For example, you can make an important article have both "top"[h]"and "slide"[f]"Property, so that it can be displayed in different forms in different areas of the website."

2. Can I filter multiple recommended properties in onearchiveListtag at the same time?No.archiveListlabel'sflagThe parameter is designed to accept only one recommended attribute letter at a time. If you need to display different recommended attribute content on a page (for example, one area displaying "Top News", another area displaying "Recommendation"), you need to use multiplearchiveListTags, each tag is set differentlyflagValue.

3. If I have set the recommended attribute but the content is not displayed on the front-end page, what could be the reason?There could be several reasons:

• The content has not been published or has expired:Make sure the recommended attribute content you have set has been published, and the publish time is within the valid period (if no scheduled publication has been set).
• Template code error:Check your template code to ensurearchiveListin the labelflagThe parameter letters match the letters of the properties set in your background and there are no other spelling errors.
• No matching content:Make sure the content is indeed set with the corresponding recommendation attribute. Try in the background