How to use the article's `flag` attribute (such as 'Top Story', 'Recommendation') to filter and highlight specific content?

In AnQi CMS, effectively managing and highlighting specific content is the key to successful website operation.When the content of a website becomes richer, how to ensure that important information can quickly attract the attention of visitors, guide them to browse the core content, and this has become a problem that every operator needs to think deeply about.AanQi CMS provides powerful "recommended attributes" (')flagFunction that allows you to easily filter and display specific content in a prominent way, thereby enhancing user experience and the operation of the website.

Understand AnQi CMS.flagproperty

flagAttribute, as the name implies, is a kind of "marker" or "flag" of content, used to identify its special status or purpose. In the Anqi CMS backend, when you publish or edit articles, you can set one or more recommended attributes for the content in the "Recommended Attributes" areaflagThese properties are like tags applied to articles, making it easy to classify and aggregate display on the frontend page.

AnQi CMS has built-in a variety of commonly used recommendation attributes, each with specific letter codes and typical application scenarios:

  • Headline[h]It is usually used for the most core and important news or articles on a website, often displayed as a single article in a prominent position on the homepage or channel page.
  • Recommended[c]: Suitable for high-quality content that is worth recommending to users, which can constitute lists such as "Hot Recommendations", "Featured Articles", etc.
  • Slide[f]: Designed for carousels, articles marked as slides usually contain attractive images and are displayed in the carousel area on the homepage.
  • Featured[a]：Compared to 'recommended', it emphasizes the uniqueness and importance of the content, and can be used for in-depth reports or special features.
  • Scrolling[s]: Suitable for display in bulletin boards, news ticker areas, etc., content is usually short and updated frequently.
  • Image[p]: Mark those contents that are mainly presented with images, such as albums, product displays, etc.
  • Jump[j]If the content of the article itself is an external link or a guide to another page within the site, this attribute can be used in conjunction with the URL to achieve a click-through.

These properties can be used individually, or combined, for example, an article can be both a 'headline' and a 'slide', but usually we choose the most appropriate single one for different display areasflagMake a call.

How to highlight specific content on the frontend page?

MasteredflagAfter setting the properties, the next step is to use the powerful tag system of the Anqí CMS in the front-end template of the website to filter and display the content marked. The core is to usearchiveListTag, and through itflagFilter content by parameters

1. Call the headline article example

Suppose you want to display a 'Top News' article at the top of the website homepage, which is usually the latest and most important article. You can call it in the template like this:

<div class="section-headline">
    {# 调用标记为“头条”的最新一篇文章 #}
    {% archiveList headlineArticle with flag="h" limit="1" order="id desc" type="list" %}
        {% for item in headlineArticle %}
            <a href="{{item.Link}}">
                <img src="{{item.Logo}}" alt="{{item.Title}}">
                <h2>{{item.Title}}</h2>
                <p>{{item.Description|truncatechars:100}}</p>
            </a>
        {% empty %}
            <p>暂无头条文章。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

In this example:

  • flag="h": Specify only to retrieve articles marked as 'Headline.'
  • limit="1": Limit to display only one article.
  • order="id desc": Sort by article ID in descending order, i.e., to get the latest headline article.
  • item.LogoIf the article is set with a cover image, it will be displayed here.
  • item.Description|truncatechars:100Display the article introduction and truncate to the first 100 characters.

2. Call the example of the popular recommendation list.

On the sidebar or at the bottom of content pages on a website, there is often a "Hot Recommendations" list, attracting users to continue browsing other high-quality content.

<div class="sidebar-recommendations">
    <h3>热门推荐</h3>
    <ul>
        {# 调用标记为“推荐”的5篇文章，并按浏览量倒序排列 #}
        {% archiveList recommendedArticles with flag="c" limit="5" order="views desc" type="list" %}
            {% for item in recommendedArticles %}
                <li><a href="{{item.Link}}">{{item.Title}}</a></li>
            {% empty %}
                <li>暂无推荐文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

We used hereflag="c"To filter recommended content and throughorder="views desc"Articles with the highest number of views should be displayed at the top.

3. Example of calling the slide (carousel) example

For the visual focus of the home page - the slide area,flag="f"The attribute is particularly important.

<div class="main-carousel">
    <div class="carousel-inner">
        {# 调用标记为“幻灯”的3篇文章，通常这些文章会配有高质量大图 #}
        {% archiveList carouselSlides with flag="f" limit="3" type="list" %}
            {% for item in carouselSlides %}
                <div class="carousel-item">
                    <a href="{{item.Link}}">
                        <img src="{{item.Logo}}" alt="{{item.Title}}">
                        <div class="carousel-caption">
                            <h4>{{item.Title}}</h4>
                        </div>
                    </a>
                </div>
            {% empty %}
                <p>暂无幻灯片内容。</p>
            {% endfor %}
        {% endarchiveList %}
    </div>
    {# 这里通常会配合JavaScript和CSS库实现轮播功能，AnQiCMS标签只负责内容输出 #}
</div>

In this scenario,item.LogoUsed to display large images,item.TitleAs a slide title or description. Please note that the actual dynamic effects of the slide usually require support from front-end JavaScript and CSS libraries, and the Anqi CMS tag is mainly responsible for providing data sources.

4. Fine-tune the selection with other parameters

flagThe attribute does not exist in isolation, it can bemoduleId(Content Model ID),categoryId(Category ID),order(Sorting method),limit(Display quantity) combined with other parameters to achieve more accurate content filtering.

For example, do you want to display the "recommended" articles under a specific category:

{# 在文章模型ID为1，分类ID为10的分类下，显示3篇推荐文章 #}
{% archiveList categoryRecommended with moduleId="1" categoryId="10" flag="c" limit="3" type="list" %}
    {# ... 循环显示文章内容 ... #}
{% endarchiveList %}

Content operation strategy and **practice

Make full use offlagProperties, not only technical operations, but also a kind of content operation wisdom.

  1. clearflagDefinition and Usage:Establish consensus within the team, each kind offlagRepresents what type of priority content should be displayed, and avoid random marking to cause confusion.
  2. Maintain scarcity and avoid abuse:The core content is striking because it is limited in quantity. If all articles are marked as 'recommended' or 'headline', these attributes lose their guiding role. Allocate reasonablyflag, to make