In AnQiCMS template, how to add a recommended icon to the article title based on the boolean state of the `item.Flag` attribute?

When managing website content in AnQiCMS, we often hope to highlight important articles with some intuitive visual elements, such as adding a prominent small icon to recommended content.This not only attracts visitors' attention but also helps them quickly find high-quality information on the website.Luckyly, AnQiCMS is built-initem.FlagProperties and flexible template engines make it very simple to meet this requirement.

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

Understandingitem.FlagProperty: recommendation indicator for content

In the AnQiCMS content management system, each article has a feature called 'Recommendation Attribute', which corresponds toitem.FlagThis property. This property is very flexible, it can be used to mark various states of articles, such as:

• Headline[h]: Indicates that the article is the key news or the most important content on the website.
• Recommended[c]This indicates that the article is a selected recommended content.
• Slide[f]This is commonly used for carousel or homepage large image display.
• Featured[a]Content specially recommended.
• Image[p]This indicates that the article content includes important images.
• Jump[j]Clicking the title will jump to an external link.

When editing articles in the background, you can select one or more options in the "Recommended Properties" area. For example, if you select "Recommended", then in the template, this article'sitem.FlagAttributes may contain charactersc. It is worth noting that,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 that it has the headline, recommendation, and slide properties.Understanding this is crucial for our subsequent conditional judgments.

Obtained in the templateFlagproperty

To determine and display the recommended icon in the front-end template, first make sure that you have correctly obtained the article list byFlagThe property is also obtained. AnQiCMS providesarchiveLista tag 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 a list page of articles (such as a category list page or home page) and you want to display the article title and its recommended icon, the basicarchiveListLabel calling 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 mentioned:showFlag=trueIt ensures that:item.FlagIt is crucial to access:

To implement icon display: utilizingcontainThe filter makes conditional judgment

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

For example, to determine if an article has beenitem.Flagwhether it includescrecommended (i.e.,{% for item in archives %}we can use the following conditional

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

here,item.Flag|contain:'c'Will checkitem.Flagto check if a string contains lettersc. If it exists, it will render one out<i> and add a tag for itfas fa-starandrecommend-icon these two CSS classes.fas fa-starIt is usually the star icon represented in the FontAwesome icon library, andrecommend-iconIt is the style class you can customize, which can be used to control the color, size, and position of icons. 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 mentioned above and add icons to the titles of recommended articles in an actual article list.

Firstly, make sure that your template HTML file has already included the required icon library (such as FontAwesome) CSS file, and that you have defined it in your custom CSS.recommend-iconStyle.

/* 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.htmlyou can write 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 %}

By such settings, when the 'recommended attribute' of the article is checked, a yellow star icon will automatically appear before the title, and the title text will also become blue and bold, thus visually distinguishing it from other articles.

Advanced Application and Thinking

• Multiple icons and stylesIf:item.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.
• Flexible backend management：Due to the complete display of these icons being based on the background's “recommendation attribute” settings, operation personnel can conveniently control which articles need to be highlighted through simple checkmarks without having to modify any code.
• Unified styleIt is recommended to plan the differences from the beginning of the designFlagThe corresponding icons and styles to ensure the consistency of the overall visual style of the website

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

Frequently Asked Questions (FAQ)

1.