How to implement the 'Recommended Attributes' tag highlighting in the front-end of AnQi CMS?

AnQi CMS provides a powerful content management function, among which the "recommended attribute" tag is a very practical tool for content operation.It can help us effectively organize and highlight the important content on the website, whether it is to improve the user experience or to better optimize SEO, these properties can play a key role.

Understanding 'Recommended Attribute': A Tool for Content Operations

In AnQi CMS, the "recommended attribute" is a special identifier set for each document (such as articles, products, etc.)They allow us to mark certain content as 'Headline', 'Recommendation', 'Slideshow', etc., so that it can be displayed in different ways on the front page, attracting users' attention.These properties are not only convenient for backend management, but also provide great flexibility for front-end developers, allowing them to highlight content flexibly in different areas of the website according to different operational strategies.

AnQi CMS provides a variety of preset recommendation attributes, each attribute has a corresponding letter code, making it convenient to call in templates:

• Headline [h]This is usually used for the most important and most concerned content on a website, often displayed at the top or in a prominent position on the homepage.
• Recommend [c]: General content referred to by editing or system recommendations, which can be displayed on various list pages, sidebars, and other locations.
• Slide [f]: Designed specifically for carousels, suitable for display in the homepage or other areas in the form of large images or slides.
• Special recommendation [a]: Specially recommended content, may have higher priority or special significance.
• Scroll [s]: Suitable for display in bulletin boards, news tickers, and other areas.
• Bold [h]: (Note: It overlaps with the 'headline' attribute code, usually 'headline' is used primarily, or the front-end applies additional bold styling based on other fields set in the backend)
• Image [p]: Tagged as an article containing important images, convenient for calling in the image display module.
• Jump [j]: Tagged as content that needs to jump to an external link.

It should be noted that if we use in the same content list tag,flagParameters are used to filter content, usually only one attribute can be specified to filter. This means that you cannot filter "Headlines" and "Recommendations" at the same time, and you need to call them separately.

Backend settings: highlight the content

On the AnQi CMS backend management interface, setting the "recommended attributes" for documents is very intuitive.When you add or edit any document under the "Content Management" module, you will see a section named "Recommended Properties".

Here, the system will list all available recommended properties in the form of a multi-selection checkbox.You can select one or more properties based on the nature of the content and operational requirements.For example, if a press release needs to be displayed as a headline news and also appear in the homepage carousel, you can check both 'Headline [h]' and 'Slide [f]'.Once set and saved, these properties will be associated with the document, preparing for flexible calls from the front-end.

Front-end implementation: make the 'recommended attribute' shine on the website

The Anqi CMS uses a template engine syntax similar to Django, which means we can use{% 标签 %}to perform logical control, using{{ 变量 }}Output content. Understanding this basic principle is the key to highlighting in front-end.

In front-end templates, we mainly usearchiveListandarchiveDetailthese tags to operate the 'recommended properties'.

1. Filter and display a list of specific recommended content

The most common requirement is to filter and display content based on recommended attributes.For example, you may want to display the latest "top news" content at the top of the homepage, or show "recommended" articles in the sidebar.archiveListUsed in tagsflagParameter.

Suppose you want to get 5 articles marked as "recommended [c]":

{# 筛选并展示5篇被标记为“推荐”的文章 #}
<div class="recommended-articles">
    <h2>编辑推荐</h2>
    {% archiveList recommendedArticles with moduleId="1" flag="c" limit="5" %}
        {% for article in recommendedArticles %}
            <div class="article-item">
                <a href="{{ article.Link }}">{{ article.Title }}</a>
                <p>{{ article.Description }}</p>
            </div>
        {% empty %}
            <p>暂无推荐文章。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

Similarly, if you need to display the content of the slide area, you can useflag="f":

{# 筛选并展示幻灯片内容 #}
<div class="homepage-slider">
    {% archiveList sliderItems with moduleId="1" flag="f" limit="3" %}
        {% for item in sliderItems %}
            <div class="slide">
                <a href="{{ item.Link }}">
                    <img src="{{ item.Logo }}" alt="{{ item.Title }}">
                    <h3>{{ item.Title }}</h3>
                </a>
            </div>
        {% empty %}
            <p>暂无幻灯片内容。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

By modifyingflagThe value of the parameter, you can easily retrieve and display different types of recommended content in various parts of the website.

2. Dynamically display the "Recommended Attribute" label in the content list.

Sometimes, we do not want to filter the list individually, but rather add some highlight indicators dynamically to a regular article list, such as a small icon or a text label. To achieve this, you need toarchiveListthe tag withshowFlag=trueParameters, in this wayitem.Flagthe field can be accessed in the loop.

item.FlagIt returns a string, if an article has set multiple recommendation attributes at the same time (such as "top" and "recommended"),item.FlagThe value may be"hc". We can use the Anqi CMS'scontain