How to call and categorize the recommended attributes (such as headlines, sliders) of AnQiCMS articles on the frontend?

How to make those important and exciting contents stand out and catch the attention of users first, which is the key to improving user experience and content marketing effectiveness.AnQiCMS provides a very practical recommendation attribute mechanism, helping us easily implement content classification and highlighting, such as setting hot articles as "headlines" or displaying selected products in the "slider" area.

This article will introduce you to how the recommended attribute of AnQiCMS articles is set up in the background and how it can be flexibly called in the front-end template, thereby making your website content show richer levels and attractiveness.

Understanding Recommended Attributes: A Tool for Content Operation

In the AnQiCMS backend, when we edit or publish articles, we will see an option for 'recommended properties'.This is like putting a tag on an article, telling the system that this content has special recommendation value.These recommended properties are not just textual descriptions, each of them corresponds to a short letter identifier, which is convenient for us to make precise calls in the front-end template.

Recommended attributes we commonly use include:

• Headline[h]: Typically used for the most important and most concerned news or announcements on the website, occupying a prominent position.
• Recommended[c]: Refers to the articles that the site owner thinks are worth recommending to users, which may appear in the sidebar, list pages, etc.
• Slide[f]: Content that needs to be displayed in the home page carousel (Carousel/Slider), usually accompanied by attractive images.
• Featured[a]：Further than 'recommended', emphasizing its uniqueness or importance.
• Scrolling[s]：Suitable for display in news tickers, notification bars, and other scrolling areas.
• Image[p]Emphasize content primarily with images, or specifically highlight the thumbnail.
• Jump[j]Indicates that clicking will jump to an external link or another specified page.
• Bold[h]It should be noted that the document also mentions that the "bold" attribute is used in the same way[h].flag="h"Articles marked as both "top news" and "bold" will be matched. This provides flexibility, but if a strict distinction is needed, it may be necessary to combine other custom fields to handle it.

By reasonably setting these recommended properties, we can easily divide the content into different display areas, allowing users to quickly locate the information they are interested in when browsing the website.

Front-end call:archiveListMagic of tags

AnQiCMS's front-end template adopts a syntax similar to the Django template engine, wherearchiveListTags are the core of calling the article list. To display articles with specific recommendation attributes on the front end, we mainly usearchiveLista key parameter of the tag:flag.

flagParameters allow us to specify the recommended attribute letters we want to call. For example, if you want to display all articles marked as "top news", you can do so byarchiveListthe tag withflag="h".

The basic structure of calling the article list is usually like this:

{% archiveList archives with type="list" flag="h" limit="5" order="id desc" %}
    {% for item in archives %}
        <div class="headline-item">
            <a href="{{item.Link}}">{{item.Title}}</a>
            <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        </div>
    {% empty %}
        <p>暂时没有头条文章。</p>
    {% endfor %}
{% endarchiveList %}

In this code block:

• archiveList archives with ...We define a variable namedarchivesto store the retrieved article list.
• type="list"It indicates that we need a fixed number of lists rather than a paginated list. If pagination is needed, it can be set totype="page"and combiningpaginationlabel usage
• flag="h"This is the key we use to specify the article attribute of the 'headline'.
• limit="5"The limit is set to only display the latest 5 articles.
• order="id desc"：Sorted by article ID in descending order, which usually means displaying the most recently published articles. You can also adjust according to your needsorder="views desc"(Sorted by views in descending order) ororder="sort desc"(Sorted by custom sorting in the background).
• {% for item in archives %} ... {% endfor %}: Loop through.archiveseach article in the variable,itemrepresents the current article object being traversed.
• {{item.Link}}and{{item.Title}}: respectively output the article's link and title.
• {{stampToDate(item.CreatedTime, "2006-01-02")}}This is a convenient auxiliary tag used to format the creation timestamp of articles into a readable date format.
• {% empty %} ... {% endempty %}：WhenarchivesA prompt 'No headline articles at the moment' is displayed when the list is empty.

It should be noted that inarchiveListtags, only one can be specified at a timeflagInvoke the property. This means that if you want to display both "headlines" and "slides" articles in the same area, you need to use two separatearchiveListTag to retrieve data, then integrate and display it on the front end.

Practice case: Displaying recommended attribute articles in categories.

Let's look at how to make use of through several specific scenarios.archiveListTags andflagParameters, display articles with different recommended attributes on the website.

Scenario one: The 'Top News' module on the homepage.

On the most prominent position of the website homepage, we usually set up a 'headline news' area to display the latest and most important content.

<section class="headline-news">
    <h2>头条新闻</h2>
    <div class="news-list">
        {% archiveList headNews with type="list" flag="h" limit="3" order="id desc" %}
            {% for news in headNews %}
                <article>
                    <h3><a href="{{news.Link}}">{{news.Title}}</a></h3>
                    <p>{{news.Description|truncatechars:100}}</p> {# 截取前100个字符作为简介 #}
                    <span>{{stampToDate(news.CreatedTime, "2006-01-02")}}</span>
                </article>
            {% empty %}
                <p>当前没有头条新闻。</p>
            {% endfor %}
        {% endarchiveList %}
    </div>
</section>

This code will fetch the latest 3 articles marked as 'Top News' and display them briefly with titles, summaries, and publication dates.

Scenario two: The 'slider' area at the top of the website.

Carousel ads are a common way to attract users' attention, we can use articles marked as "slideshow" as the content of the carousel. In the background, make sure these articles are uploaded with beautiful thumbnails (usuallyLogofield orThumbfield).

`twig

{% archiveList sliderItems with type="list" flag="f" limit="5" order="sort desc" %}
    {% for slide in sliderItems %}
        <div class="slide-item">
            <a href="{{slide.Link}}">
                <img src="{{slide.Logo}}" alt="{{slide.Title}}"> {# 使用Logo作为幻灯片大图 #}
                <div class="slide-caption">
                    <h3>{{slide.Title}}