How to use AnQiCMS's recommendation attribute (flag) to filter and display specific content, such as "Headline" or "Slider"?

AnQiCMS provides a flexible recommendation attribute (flag) mechanism, allowing website operators to easily filter and highlight specific content, whether it is the 'Headlines' on the website homepage, the 'Slides' in the carousel, or other 'Recommended' content that requires special attention.This feature greatly improves the efficiency of content operation and the richness of website content.

Understand recommended attributes: Attach '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 a specific location.The recommended feature of AnQi CMS is a set of 'tags' system that was born for this.It allows you to add one or more special tags to the content outside of the regular categories and tags.

These recommended attributes are called "flag" in the background, which are represented by a simple letter to indicate different types of recommendations. Currently, the Anqi CMS supports the following commonly used recommended attributes:

  • Top News[h]: Usually used to display the most important and eye-catching news or articles.
  • [en] Recommended[c]: Indicates that the content is high-quality recommended by the editor.
  • Slide[f]: 专为网站首页或特定区域的轮播图（幻灯片）设计。
  • [en]Special Recommendation[a]: 区别于普通推荐，用于特别推荐的内容。
  • Scrolling[s]: 适用于新闻滚动条、跑马灯等需要滚动展示的内容。
  • Bold[h]: 这是一个重复的标记，但语义上可能强调内容标题的视觉重要性。
  • Image[p]: 强调该内容含有高质量图片，可能用于图片专题或图集。
  • Jump[j]: 标识该内容点击后会直接跳转到外部链接或指定页面。

Through 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.

Setting recommended properties for content is very intuitive.When you are editing or publishing a document in the Anqi CMS backend, in the 'Add Document' or 'Edit Document' interface, you will see an option named 'Recommended Properties'.

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

The flexibility of Anqi CMS is reflected in the ability to set multiple recommended attributes for the same piece of content, which means that a single content item can be both a "feature story" and a "slider", displayed in different frontend areas.

In the front-end template, filter and display specific content.

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 done througharchiveListtemplate tags.

archiveListLabels are the core tools in AQ CMS used to obtain document lists, which provide 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, flagThe parameter can only specify one attribute letter. This means that if you want to display the content of both "Headlines" and "Slides", you need to use two separatearchiveListLabel.

Below, let's see how to operate through several examples:

Example one: Display 'Top News' on the homepage

Assume you want to display 5 of the latest 'Top News' 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 'Top'.
  • limit="5"Limit to show the latest 5 articles.
  • order="id desc"Ensure to get the latest published ones (ID in descending order).
  • item.Linkanditem.TitleUsed to display the links and titles of the articles.
  • item.Description | truncatechars:80It displays the article summary and truncates it to 80 characters.
  • {% empty %}It is a very practical syntax. When there is no matching content on the front end, it will display 'No headline news available.'.

Example two: Creating the 'Slider Carousel' on the homepage

Next, 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 retrieve content marked as “slide”.
  • item.ThumbUsed to display thumbnails for content settings, which is usually the main image for slides.item.LogoCan also be used in some cases.
  • We have also added a judgment, ifitem.Thumbit does not exist, then display a default image to ensure the beauty of the page.
  • The specific slide carousel effect usually requires配合 front-end JavaScript libraries (such as Swiper.js) to implement, and here only the way to obtain the content is shown.

Example Three: Display 'Recommended Products' under a Specific Category

In addition to the homepage, we can also display 'Recommended' products 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 go through{% categoryDetail currentCategory with name="Id" %}Got the current category ID.
  • 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"Filtered out products marked as 'Recommended'.
  • item.PriceShowed the price in the product's custom fields, enriching the product information.

Through these flexible combinations, the recommendation attribute feature of Anqi CMS makes content presentation more intelligent and personalized.It not only improves the content exposure, but also provides users with more accurate and valuable information.

Common Questions and Answers (FAQ)

1. Can I set multiple recommendation attributes for a piece of content at the same time?Yes, AnQi CMS allows you to select multiple recommended properties for the same document. For example, you can let an important article be both a "headline"[h]"and a "slide"}[f]The property can be displayed in different forms in different areas of the website.

2. Can I filter multiple recommended attributes at the same time in a tag?archiveList标签中同时筛选出多种推荐属性的内容吗？No.archiveListTagsflagThe parameter is designed to accept only one recommended attribute letter at a time. If you need to display content of different recommended attributes on a single page (for example, one area displays "HeadlinearchiveListTags, each tag is set differentlyflagvalue.

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

  • Content not published or expired:Ensure that the content of the recommended attributes you have set has been published, and the publish time is within the valid period (if scheduled publishing has not been set).
  • Template code error:Check your template code, make surearchiveListthe tag inflagThe parameter letters match the letters of the properties set in your backend, and there are no other spelling errors.
  • No matching content:Ensure that the recommended attributes are set correctly for the content. Try it in the background