How to dynamically display the 'recommended properties' (such as headlines, recommendations) of articles or products on a page?

When operating website content, we often need to give special recommendations to certain articles or products, such as "headlineAnQiCMS provides a very flexible "recommended attribute" feature, allowing you to easily achieve this.Let's take a look together on how to set these properties in AnQiCMS and dynamically display them on your website page.

Core Concept: Understanding 'Recommended Attributes' and Their Applications

AnQiCMS' 'Recommended attribute' is a way to mark the importance or classification purpose of content.When you publish or edit articles or products, you can find the "Recommended Attributes" option in the backend.

• Headline [h]: Usually used in the most important and most prominent position on the home page of a website.
• Recommend [c]: Generally refers to recommended content that can be displayed in various lists or sidebars.
• Slide [f]Carousel content or slideshow area commonly used.
• Special recommendation [a]Content specially recommended.
• Scroll [s]May be used for scrolling news or announcements.
• Bold [h]: The document mentions that this property code is duplicated with the headline, and attention should be paid to the actual effect when used.
• Image [p]: Indicates that the content contains images, making it convenient to filter out pure image content.
• Jump [j]It indicates that clicking will jump to external link content.

These properties are not mutually exclusive, you can select multiple recommended properties for the same article or product. For example, an article can be both 'headline' and 'recommended'.

These properties are very intuitive to set in the background.When you enter the 'Content Management' module, whether it is 'Add Document' or 'Edit Document', you will see the option 'Recommended Properties' on the right side of the editing interface. Just check the corresponding properties.

Front-end display: How to dynamically call in the page

Understood the settings of 'recommended attributes', the next step is how to dynamically display this content on the website page.AnQiCMS Strong template tag system makes this process simple.

Scenario one: Filter and display specific recommended attributes on the list page

You may wish to have a section dedicated to 'top news' articles on the homepage of the website, or recommend a few 'hot selling' products at the top of the product list page. At this point,archiveListLabels can be useful. It has oneflagA parameter that allows you to filter content based on recommended properties.

For example, to display 5 'top news' articles in a certain area of the website, you can write the template code like this:

<section class="headline-articles">
    <h2>最新头条</h2>
    <ul>
        {% archiveList headlines with moduleId="1" flag="h" limit="5" %}
            {% for article in headlines %}
                <li>
                    <a href="{{ article.Link }}">{{ article.Title }}</a>
                    <span>发布日期：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
                </li>
            {% empty %}
                <li>暂无头条文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</section>

In this example:

• moduleId="1"Indicates that we are calling the content of the article model (usually the ID of the article model is 1, please check the background content model settings).
• flag="h"Specify only the content marked as "Top News."
• limit="5"Then, limit only to show the latest 5 articles that meet the conditions.

It should be noted that,archiveListlabel'sflagOnly one attribute code can be specified at a time.This means you cannot directly pass throughflag="h,c"to simultaneously obtain the content of 'Headlines' and 'Recommendations'. If you need to display content with multiple recommendation attributes, you may need to use multiplearchiveListLabel block, or display it within a loop after obtaining all the content.

Scenario two: Display the recommended attribute tag next to the content details page or list item.

In addition to filtering the display, you may also want to show the recommended properties directly next to the title of an article or product, or at some position in the list item.For example, add a "headline" or "recommended" corner label next to the article title.

When you usearchiveListWhen a tag loops out content, eachitemobject will contain oneFlagfield that stores all the recommended attribute codes of the content, for example"h,c". You can use a filter in the template tocontainjudge.FlagDoes the field contain a specific attribute code.

Here is an example of a recommended attribute tag displayed next to the article title.

<article class="article-detail">
    <h1 class="article-title">
        {{ archive.Title }}
        {% if archive.Flag|contain:"h" %} <span class="flag-headline">头条</span> {% endif %}
        {% if archive.Flag|contain:"c" %} <span class="flag-recommend">推荐</span> {% endif %}
        {% if archive.Flag|contain:"f" %} <span class="flag-carousel">幻灯</span> {% endif %}
    </h1>
    <div class="article-meta">
        <span>分类：<a href="{{ archive.Category.Link }}">{{ archive.Category.Title }}</a></span>
        <span>发布日期：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
        <span>阅读量：{{ archive.Views }}</span>
    </div>
    <div class="article-content">
        {{ archive.Content|safe }}
    </div>
</article>

In this example:

• We used it directly.archive.TitleGet the title of the current document.
• {% if archive.Flag|contain:"h" %}This line of code determines whether the current document'sFlagattribute containsh(Top News) this code. If it contains, it will display a<span>label, content is "Top News".
• You can add different style classes as needed for different property codes (such asflag-headline,flag-recommend) and beautify their display with CSS, such as setting the background color, font style, etc., making them look like a prominent tag.

If you are in aarchiveListWithin the loop, the code will be very similar, just replacearchivewith the loop variable (for exampleitem) and it will be:

`twig {% archiveList articles with moduleId=“1” limit=“10” showFlag=true %} {# Note that showFlag=true parameter was added #}

{% for item in articles %}
    <div class="article-item">
        <h3>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            {% if item.Flag|contain:"h" %} <span class="flag-headline">头条</span> {% endif %}
            {% if item.Flag|contain:"c" %} <span class="flag-recommend">推荐</span> {% endif %}
        </h3>
        <p>{{ item.Description }}</p>
    </div>
{%