How does AnQiCMS control the display of content in different areas through the 'Flag' attribute (such as recommended, headline)?

AnQiCMS：How to skillfully use the 'Flag' attribute to accurately control the layout of website content

In content operation, merely publishing articles is far from enough.How to make important content stand out, and how to intelligently display specific content in different areas of the website, is the key to improving user experience and operational efficiency.AutoCMS (AutoCMS) understands this well and provides us with a powerful and flexible tool - the 'Flag' attribute, to巧妙ly achieve this goal.

What is the 'Flag' attribute of content?

In simple terms, the "Flag" attribute is like tagging each of your documents with one or more special "tags", but these tags are not ordinary categories or keywords.They are preset, with specific display meanings, identifiers used to inform AnQiCMS where this content should appear in the website's 'special areas'.By checking these properties while editing content in the background, we can easily control the display style of the content on the front-end page.

AnQiCMS built-in 8 commonly used "Flag" properties, we can flexibly select according to the importance of the content, display form, or special use:

  • Top News[h]：usually used in the most prominent position on the homepage of a website, emphasizing news or important announcements.
  • [en] Recommended[c]：indicates that the content has been carefully selected and is worth recommending to users, often used on list pages or sidebars.
  • Slide[f]：Applicable to carousels or image walls, attracting users visually.
  • [en]Special Recommendation[a]：More than just 'Recommended', usually referring to valuable or exclusive in-depth content.
  • Scrolling[s]：Suits for display in news ticker or scrolling bulletin board, maintaining the dynamic visibility of content.
  • Bold[h]：This may look similar to the letters of “headline”, but in some designs, it may only be used to highlight text, not the position. In actual application, AnQiCMS will use[h]Explanation for headlines.
  • Image[p]: Emphasize content mainly in pictures, or need special handling for thumbnail display.
  • Jump[j]：Indicates that the user will be redirected to an external link or a specified page within the site when clicking on this content, rather than the content details page.

You can select one or more of these properties when publishing or editing documents. AnQiCMS will record them and wait for you to call them in the front-end template.

Set the "Flag" property in the background

The operation to set the "Flag" attribute for content is very intuitive.When you enter the AnQiCMS backend, whether it is 'Add Document' or 'Edit Document', among the many options in the document editing interface, you will see a section named 'Recommended Properties'.

Here, these 8 Flag properties will be presented as checkboxes.You can select one or more appropriate properties based on the current operation strategy of the document.For example, you might check both 'Headline' and 'Recommendation' for a very important press release; while for a product that needs to be displayed in a large carousel, you would check the 'Slideshow' attribute.After making a selection, save the document.

Use the "Flag" property in the frontend template to control display

The power of the "Flag" attribute is reflected in how it seamlessly integrates with the AnQiCMS template tags to achieve dynamic content display. The most commonly used tag isarchiveListIt can help us flexibly call different content attributes at any location on the website.

1. Call the content of the specific 'Flag' attribute

If you want to display articles marked as 'Top News' in a certain area of the website, such as the 'Top News' section on the homepage, you can use it like thisarchiveListTags:

{# 获取所有被标记为“头条”的文章列表 #}
{% archiveList archives with type="list" flag="h" limit="5" %}
    {% for item in archives %}
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p>{{item.Description}}</p>
    {% endfor %}
{% endarchiveList %}

Here,flag="h"Explicitly tell AnQiCMS to only crawl documents that have been checked for the 'Headline' attribute (corresponding to the letterh). The number of displayed documents is limited to 5.limit="5".

Similarly, if you want to display "recommended products", you canflagsetc:

{# 获取所有被标记为“推荐”的产品列表 #}
{% archiveList recommendedProducts with type="list" moduleId="2" flag="c" limit="4" %}
    {% for item in recommendedProducts %}
        <img src="{{item.Thumb}}" alt="{{item.Title}}" />
        <h4><a href="{{item.Link}}">{{item.Title}}</a></h4>
    {% endfor %}
{% endarchiveList %}

Please note that when you call content in the samearchiveListlabel, you can only specify oneflagFilter properties. If you need to display the content of multiple properties at the same time, you need to use differentarchiveListtags to call.

2. Exclude the content of specific "Flag" properties

Sometimes, we may need to display all articles under a category, but exclude those that have already been displayed as a "top story" to avoid repetition.excludeFlagThe parameter comes into play:

{# 显示分类ID为1的所有文章，但排除掉“头条”文章 #}
{% archiveList normalArticles with type="list" categoryId="1" excludeFlag="h" limit="10" %}
    {% for item in normalArticles %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
    {% endfor %}
{% endarchiveList %}

Thus, you can ensure that the 'Top News' section and the general article list do not contain identical articles, optimizing the content layout.

3. In the list item, display the “Flag” attribute

In addition to filtering content, you may also want to display the "Flag" attribute next to each item in the content list. For example, you can add a "recommended" mark or an icon to "recommended" articles.showFlagparameters with{{item.Flag}}This can be achieved:

{# 获取所有文章，并显示它们的Flag属性 #}
{% archiveList allArticles with type="list" showFlag=true limit="8" %}
    {% for item in allArticles %}
        <li>
            {% if item.Flag %}
                <span class="flag-badge">{{item.Flag}}</span> {# 假设item.Flag会返回属性的字母代码，如"h", "c" #}
            {% endif %}
            <a href="{{item.Link}}">{{item.Title}}</a>
        </li>
    {% endfor %}
{% endarchiveList %}

PassshowFlag=trueAnQiCMS will fill the document's Flag attribute value toitem.FlagYou can make style judgments or text display based on these letter codes on the front-end.

application scenarios in practice

“Flag” property brings great convenience and flexibility to our content operation:

  • Home page focus area: Throughflag="f"Call slide content.
  • [en]Sidebar popular recommendations: Throughflag="c"Call recommended articles or products.
  • Different styles of list displayFor example, on the article list page, you may want to display 'Featured' articles in large image mode, while other articles are displayed in small image or plain text mode. In this case, you can call different modes separatelyflagThe content and apply different styles.
  • Avoid content management chaos.: No need to modify categories or manually adjust sorting to 'pin' content, just a simple check is enough.

Summary

AnQiCMS's “Flag” attribute provides a powerful and flexible tool for content operators, allowing content management to go beyond traditional categories and tags.By simple backend selection and frontend template calling, we can accurately control the display position and method of website content, greatly improving the efficiency of content operation, and bringing users a higher quality, more guiding browsing experience.Use the "Flag" attribute to make your website content layout more intelligent and efficient.

Common Questions (FAQ)

1. Can I call the content of multiple “Flag” attributes at the same time in a label? For example, do I want to display both “Headline” and “Recommendation”?archiveList标签中同时调用多个“Flag”属性的内容吗？比如，既想显示“头条”又想显示“推荐”？

No. AnQiCMS'sarchiveListTags inflagParameters can only specify one "Flag" attribute at a time (for exampleflag="h"orflag="c")。If you need to display the content of multiple attributes simultaneously, you need to use multiplearchiveListCall the label, then combine them together.

2. What is the difference between the "Flag" attribute and the ordinary "Tag"?

“Flag” property is a preset by AnQiCMS, mainly used to control the content in specific areas of the website (such as the home page featured images, sidebar recommendations, etc.)Show priority and display format。They are system-level content identifiers, usually consisting of a single letter code. The "Tag label" is created freely by users and is more focused on summarizing and associating keywords.Keyword summarization and associationUsed for topic aggregation and in-site search, it usually generates an independent tag list page.

3. If I set the '幻灯' attribute for a document, but the front-end does not call the slide area, what impact will it have?

No negative effects. If you have set some 'Flag' attribute in the background, but there is no corresponding one in the front-end template.archiveListIf this attribute is called by the tag, this document will simply have an internal marker and will not be specially handled on the frontend. It will still be displayed normally in the list under its category, or it will be displayed by other tags without special treatment.flagthe parameter'sarchiveListlabels.