How to display the Flag attribute of the document in the `archiveList` loop, for example, 'Recommended' or 'Bold'?

As an experienced website operations expert, I am willing to deeply analyze how to flexibly use AnQiCMSarchiveListLoop to display the document's Flag attribute, such as 'Recommended' or 'Bold'.The core of content operation lies in how to effectively distinguish and highlight key content, and the Flag attribute is a powerful and easy-to-use feature provided by AnQiCMS for this purpose.

Light up your content! How to use AnQiCMS toarchiveListUse Flag attributes cleverly to highlight the document

In today's increasingly abundant digital content, how to make important articles, popular products, or recommended information stand out on websites and attract users' attention is a challenge faced by every content operator.AnQiCMS (AnQiCMS) deeply understands this, providing us with the exquisite design of 'Flag attribute', which allows us to easily mark document content with special tags such as 'recommended', 'headline', or 'bold'.But this is just the first step, what's more important is how we display on the website's front pagearchiveListIn the loop, display these meaningful Flag attributes cleverly, truly 'illuminating' our content?

Understanding the Flag attribute: the 'label' of content operation

In the AnQiCMS backend, when we edit or publish a document, we will find an option called 'Recommended Properties'.This provides a variety of preset Flag labels, such as "Recommended[c]", "Headline[h]", "Slide[f]", "Bold[h]", and so on.These letter identifiers (such asc,h,f) is the code used internally in AnQiCMS to distinguish different Flags.You can choose one or more Flags based on the operation strategy of the content, such as marking an important news article as 'Headline' and 'Recommendation', or a popular product as 'Slideshow' to be displayed on the homepage carousel.

The value of these Flag attributes lies in the fact that they are not only intrinsic markers of content, but also the basis for personalized display and filtering at the template level.They are like 'badges' on the content, telling visitors what makes this content special.

InarchiveListDisplaying the core of the Flag attribute:showFlagParameter

To bearchiveListIn the loop, we display the Flag attribute of the document, and we first need to make sure that the list tag can access this information. AnQiCMS'sarchiveListThe tag provides a very critical parameter:showFlag.

By default, for performance reasons,archiveListThe Flag attribute of each article will not be automatically loaded when querying the document list, soshowFlagThe default value of the parameter isfalseThis means that even if you set the Flag for the document in the background, if it is not explicitly set in the templatetruethe front-end loop cannot access ititem.FlagThis property.

Therefore, the first step when you want to display the Flag attribute in the document list is toarchiveListExplicitly specify in the tagshowFlag=true. For example:

{% archiveList archives with type="list" limit="10" showFlag=true %}
    {% for item in archives %}
        <div class="article-item">
            <h3 class="article-title">{{ item.Title }}</h3>
            {# 此时，item.Flag 属性才会被加载进来 #}
            <p>文档Flag属性：{{ item.Flag }}</p>
        </div>
    {% empty %}
        <p>暂时没有内容。</p>
    {% endfor %}
{% endarchiveList %}

OnceshowFlagSet totrue, inforin the loopitem(representing each document) object will contain a namedFlag. Thisitem.FlagThe value will be a string that contains the letter codes of all the selected Flag attributes in the document. For example, if a document is marked as both "recommended[c]" and "headline[h]", thenitem.FlagThe value may just behc.

Fine-tuning display: Customizing the Flag property style

obtaining toitem.FlagAfter the value, we can add different styles to the document title or abstract based on its content, to achieve the effect of highlighting. Here,ifLogical judgment tags come into play. We can check byitem.FlagDoes the string contain a specific Flag letter code to dynamically add a CSS class or insert a specific icon.

For example, we want to add a green 'Recommended' tag to the 'Recommended' document, make the document title bold for 'Bold' documents, and display a dedicated icon for 'Slide' documents:

{% archiveList archives with type="list" limit="10" showFlag=true %}
    {% for item in archives %}
        <div class="article-item">
            <h3 class="article-title">
                {# 判断是否包含“推荐”Flag（代号c） #}
                {% if "c" in item.Flag %}
                    <span class="flag-recommend">推荐</span>
                {% endif %}
                {# 判断是否包含“头条”或“加粗”Flag（代号h） #}
                {% if "h" in item.Flag %}
                    <span class="flag-hot">头条</span>
                    {# 注意：AnQiCMS文档中“头条”和“加粗”都使用“h”代号。若需区分，可能需后端或模板逻辑层做更细致处理，或统一视为高优先级标记 #}
                    <strong class="flag-bold">（加粗）</strong>
                {% endif %}
                {# 判断是否包含“幻灯”Flag（代号f） #}
                {% if "f" in item.Flag %}
                    <i class="icon-slider"></i>
                {% endif %}
                <a href="{{ item.Link }}">{{ item.Title }}</a>
            </h3>
            <p class="article-desc">{{ item.Description }}</p>
            <div class="article-meta">
                <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>浏览量：{{ item.Views }}</span>
            </div>
        </div>
    {% empty %}
        <p>暂时没有内容。</p>
    {% endfor %}
{% endarchiveList %}

In CSS, you can define the corresponding styles to beautify these tags:

.flag-recommend {
    display: inline-block;
    background-color: #4CAF50; /* 绿色 */
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    margin-right: 5px;
}
.flag-hot {
    display: inline-block;
    background-color: #FF5722; /* 橙色 */
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    margin-right: 5px;
}
.flag-bold {
    font-weight: bold;
    color: #333;
    margin-left: 3px;
}
.icon-slider {
    /* 假设使用字体图标或背景图片 */
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('/static/images/icon-slider.png') no-repeat center center;
    vertical-align: middle;
    margin-right: 5px;
}

In this way, you can not only intuitively display the Flag attribute of the document on the front page, but also give it unique visual expressions according to different Flags, greatly enhancing the readability and attractiveness of the content.

Utilize not only for display:flagParameter filtering content

In addition to displaying the Flag attribute in the list,archiveListThe tag also supports passing throughflagUsing parameters toFilterThe document with a specific flag. This means you can create a dedicated 'recommended articles' block or a 'top news' list that only displays documents that meet the criteria.

For example, if you want to display a "Hot Recommendations" list in the website sidebar that only contains documents with the Flag attribute of

<div class="sidebar-block">
    <h4>热门推荐</h4>
    <ul>
        {# 这里使用flag参数来筛选，只获取包含“推荐”Flag的文档 #}
        {% archiveList hot_articles with type="list" limit="5" flag="c" %}
            {% for article in hot_articles %}
                <li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
            {% empty %}
                <li>暂无推荐文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

It should be noted that according to the AnQiCMS documentation, when you useflagparameters forFiltereacharchiveListTagyou can only use one Flag attribute. If you need to filter documents that meet multiple Flags, this may require more complex custom queries or processing on the backend.In most cases, filtering through a single Flag already meets the basic operational needs.

Summary and Practical Suggestions

MasterarchiveListThe display and utilization of the Flag attribute in the loop can make your AnQiCMS website content operation more refined and efficient. By simply settingshowFlag=truecombined{% if "x" in item.Flag %}Such conditional judgment allows you to assign unique visual identifiers to documents of different importance or categories, guiding users to pay attention to the core content. At the same time, don't forget to make use offlag="x"Parameters to build thematic content blocks, providing users with more accurate