How to add a recommended icon to the article title in AnQiCMS templates based on the boolean state of the `item.Flag` attribute?

When managing website content in AnQiCMS, we often hope to highlight important articles through some intuitive visual elements, such as adding a striking icon to recommended content.This not only attracts visitors' attention, but also helps them quickly find high-quality information on the website.item.FlagProperty and flexible template engine make it very easy to implement this requirement.

This article will discuss in detail how to implement in AnQiCMS template based on the article'sitem.FlagProperty status, cleverly adds a recommendation icon to the article title.

Understandingitem.FlagProperty: recommendation identifier for content

In the AnQiCMS content management system, each article is equipped with a feature named "Recommendation Attribute", which corresponds to in the template.item.FlagThis attribute. This attribute is very flexible, it can be used to mark various states of articles, such as:

• 【en】Top News[h]: indicates that the article is a key news or the most important content on the website.
• [en] Recommended[c]：Indicates that the article is a recommended content.
• Slide[f]：Commonly used for carousel or homepage banner display content.
• [en]Special Recommendation[a]：Special recommended content.
• Image[p]：Contains important images in the article content.
• Jump[j]Clicking on the title will jump to an external link.

When editing articles in the background, you can select one or more options in the "Recommendation Attributes" area. For example, if you select "Recommended", then in the template, this article will be shown as such.item.FlagThe attribute may contain characterscIt is worth noting,item.FlagIt is not a simple boolean value (true/false), but a string that may contain one or more recommended identifier characters, such as 'chf' indicating the presence of Headline, Recommendation, and Slideshow attributes.Understanding this is crucial for our subsequent conditional judgments.

Obtained in the templateFlagProperty

To judge and display the recommendation icon in the front-end template, you first need to ensure that you have correctly obtained the article list whenFlagThe property is also retrieved. AnQiCMS providesarchiveListtags to traverse the article list. When you use this tag, you need to add an extrashowFlag=trueparameter, so that each article'sitem.FlagThe property will be available in the loop.

Suppose you are on an article list page (such as a category list page or home page) and you want to display article titles and their recommendation icons, the basicarchiveListLabel call may be as follows:

{% archiveList archives with type="list" categoryId="1" limit="10" showFlag=true %}
    {% for item in archives %}
        <li>
            <a href="{{ item.Link }}">
                {# 这里是放置图标的位置 #}
                <h5 class="article-title">{{ item.Title }}</h5>
            </a>
            <p class="article-description">{{ item.Description }}</p>
            {# ... 其他文章信息 ... #}
        </li>
    {% empty %}
        <li>暂无文章可供展示。</li>
    {% endfor %}
{% endarchiveList %}

Note the code in the above:showFlag=trueIt is to ensureitem.FlagIt is the key to be accessible.

To implement icon display: usecontainFilter performs conditional judgment

Sinceitem.Flagis a string, we need to determine whether this string contains a specific recommendation identifier. The AnQiCMS template engine is built-in with powerful filters, includingcontainThe filter is very suitable for this scenario.containThe filter can determine if one string contains another substring and return a boolean value (True or False).

For example, to determine if an article has been "recommended" before (i.e.,item.Flagwhether it containsc), we can use the following conditional judgment in a{% for item in archives %}loop:

{% if item.Flag|contain:'c' %}
    <i class="fas fa-star recommend-icon"></i> {# 假设使用FontAwesome的星星图标 #}
{% endif %}

Here,item.Flag|contain:'c'will checkitem.Flagwhether there is any letter in this string.cIf it exists, it will render out a<i>tag and addfas fa-starandrecommend-iconthese two CSS classes.fas fa-starIt is usually the icon representing a star in the FontAwesome icon library,recommend-iconThis is the style class you customize, which can be used to control the color, size, and position of the icon. Of course, you can also replace it with the icon library you are actually using.<i>The class name of the label.

Practice Exercise: Add recommendation icons to the article list

Now, let's integrate the knowledge above into an actual article list to add icons to the recommended article titles.

Make sure that the CSS file of the required icon library (e.g., FontAwesome) has been included in your template HTML file, and that your custom CSS definesrecommend-iconstyles can be added.

/* public/static/css/custom.css 或您的主题CSS文件 */
.recommend-icon {
    color: #ffc107; /* 黄色星星 */
    font-size: 14px;
    margin-right: 5px;
}

/* 如果您想让推荐文章标题有额外样式 */
.article-title.is-recommended {
    color: #007bff; /* 蓝色标题 */
    font-weight: bold;
}

Then, in your AnQiCMS template file (for examplearchive/list.html), you can write it like this:

{# 假设这是文章列表页，通过archiveList标签获取文章数据 #}
{% archiveList archives with type="page" categoryId="1" limit="10" showFlag=true %}
    {% for item in archives %}
    <article class="article-item">
        <a href="{{ item.Link }}" class="article-link">
            {# 根据item.Flag状态添加推荐图标 #}
            {% if item.Flag|contain:'c' %}
                <i class="fas fa-star recommend-icon" title="推荐文章"></i>
            {% endif %}
            {# 同时可以根据flag添加不同的CSS类来改变标题样式 #}
            <h5 class="article-title {% if item.Flag|contain:'c' %}is-recommended{% endif %}">{{ item.Title }}</h5>
        </a>
        <p class="article-description">{{ item.Description|truncatechars:100 }}</p> {# 截取前100字作为简介 #}
        <div class="article-meta">
            <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
            <span>浏览量：{{ item.Views }}</span>
            {# ... 更多文章元数据 ... #}
        </div>
    </article>
    {% empty %}
        <p>此分类下暂无文章。</p>
    {% endfor %}

    {# 如果是分页列表，别忘了添加分页导航 #}
    <div>
        {% pagination pages with show="5" %}
            {# 分页代码请参考AnQiCMS文档中的pagination标签用法 #}
        {% endpagination %}
    </div>
{% endarchiveList %}

When the 'Recommended' option is checked under the 'Recommendation Attributes' of the article, a yellow star icon will automatically appear before the title, and the title text will also become bold in blue, thus distinguishing it visually from other articles.

Advanced Application and Thinking

• Multiple Icons and StylesIfitem.FlagContains multiple identifiers, you can add different icons or styles to each identifier. For example,{% if item.Flag|contain:'h' %}<i class="fas fa-fire hot-icon"></i>{% endif %}You can add a flame icon to the headline article.
• Backend flexible managementSince the display of these icons is completely based on the backend's 'recommendation properties' settings, operators can conveniently control which articles need to be highlighted by simply checking boxes, without having to modify any code.
• Unified style: Plan the different ones from the beginning of the designFlagThe corresponding icons and styles to ensure the consistency of the overall visual style of the website.

Passitem.FlagProperties, AnQiCMS provides powerful tools for content operations, allowing website administrators to easily manage the visual priority of content through simple backend operations, enhancing user experience and the effectiveness of content marketing.

---

Common Questions (FAQ)

1.