As an experienced website operations expert, I am happy to deeply analyze how to flexibly use AnQiCMSarchiveListLoop to display the Flag attribute of the document, such as "Recommended" or "Bold".The core of content operation lies in how to effectively differentiate 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 the Flag attribute cleverly to highlight the document
In today's age of ever-increasing digital content, how to make important articles, popular products, or recommended information stand out on a website and attract the attention of users is a challenge faced by every content operator.AnQiCMS understands this well and provides the exquisite design of 'Flag attribute', allowing us to easily add special marks such as 'Recommended', 'Headline', or 'Bold' to the document content.archiveListIn the loop, show these meaningful Flag attributes cleverly, truly 'lighting up' our content?
Understand the Flag attribute: the 'tag' of content operation
In the AnQiCMS backend, when we edit or publish a document, we will find an option named "Recommendation Attributes".This provides various preset Flag markers, such as 'Recommended[c]', 'Headline[h]', 'Slideshow[f]', 'Bold[h]', and so on.c,h,f）is the code used internally in AnQiCMS to differentiate between different Flags.You can select one or more Flags for a document based on the operation strategy of the content, such as marking an important news article as 'Headline' and 'Recommendation', or marking a popular product as 'Slideshow' to be displayed in 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's special about this piece of content.
InarchiveListDisplay the core of Flag attribute inshowFlagParameters
To bearchiveListDisplay the Flag attribute of the document in the loop, we first need to ensure that the list tag can access this information. AnQiCMS'sarchiveListTags provide a very critical parameter for this:showFlag.
By default, for performance reasons,archiveListthe Flag attribute of each article is not automatically loaded when querying the list of documents,showFlagThe default value of the parameter isfalseThis means that even if you set the Flag for the document in the background, it cannot be accessed by the front-end loop if it is not explicitly set in the templatetrue.item.FlagThis property.
Therefore, the first step when you want to display the Flag attribute in the document list is toarchiveListspecify in the tag.showFlag=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 %}
OnceshowFlagis set totrue,"inforIn the loopitem(Represents each document) object will include a property namedFlag.item.FlagThe value will be a string containing the alphabetical codes of all selected Flag attributes in the document. For example, if a document is marked as both "Recommended[c]" and "Headline[h]", thenitem.FlagThe value may behc.
Refined display: Customize the style of the Flag attribute
Get toitem.FlagAfter the value, we can add different styles to the document title or abstract based on its content, in order to achieve the effect of highlighting. Here, ifLogical judgment tags come in handy. We can checkitem.FlagDoes the string contain a specific Flag letter code, to dynamically add a CSS class or insert a specific icon.
For 'Recommend' documents, we want to add a green 'Recommend' label, for 'Bold' document titles to be truly bold, and for 'Slide' documents to display a dedicated icon:
{% 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 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, not only can you intuitively display the document's Flag attribute on the front-end page, but you can also give it unique visual representation based on different Flags, greatly enhancing the readability and attractiveness of the content.
Not just display: UtilizeflagParameter filtering content
In addition to displaying the Flag attribute in the list,archiveListthe label also supportsflagParameters toFilteringDocuments for a specific Flag. This means you can create a dedicated 'Recommended Articles' block or '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 includes documents with the 'Flag' attribute set to 'Recommended[c]', you can use it like this:
<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 useflagparameterFilteringeacharchiveListtagsonly one Flag attribute can be used.If you need to filter documents that meet multiple Flags, this may require more complex custom queries or processing on the backend.But in most cases, filtering through a single Flag is already sufficient to meet basic operational needs.
Summary and practical suggestions
MasterarchiveListLooping flag attribute display and utilization can make your AnQiCMS website content operation more refined and efficient. Simply setshowFlag=truewith{% if "x" in item.Flag %}This conditional judgment allows you to assign unique visual identifiers to documents of different importance or categories, guiding users to focus on the core content. Don't forget to make use offlag="x"Build thematic content blocks with parameters to provide users with more accurate information