How to display the recommendation attributes (such as headlines, sliders) of documents on the website front-end?

In content operation, displaying important or recommended content in an eye-catching manner to visitors is the key to improving user experience and content reach efficiency.AutoCMS (AutoCMS) provides a powerful "Recommendation Attribute" feature, allowing you to easily mark and manage different types of featured content, such as setting it as a headline article, slideshow display, or other specific recommendations.

This article will introduce how to effectively present these recommended properties of documents on the front end of the Anqi CMS website.

1. Understanding the recommended document properties of Anqi CMS

Firstly, we need to clarify what the 'recommended attribute' is in the Safe CMS, as well as how it is set up in the background.

In the backend management interface of AnQi CMS, when you add or edit documents, you will find an option named "Recommended Attributes".Here is a list of various preset attributes such as headlines, slides, recommendations, etc., each attribute corresponds to a specific letter identifier, which is convenient for the system to recognize and call.You can select one or more recommended properties for the document based on the nature of the content.

The commonly used recommended attributes and their letter identifiers include:

  • Top News[h]：通常用于网站首页最重要、最受关注的新闻或文章。
  • [en] Recommended[c]：泛指编辑精选、值得关注的内容。
  • Slide[f]：English for content that needs to be displayed in a carousel or slide show, usually accompanied by exquisite images.
  • [en]Special Recommendation[a]：English for content that is specially recommended, emphasizing its importance more than ordinary recommendations.
  • Scrolling[s]：适合在侧边栏、通知区域等以滚动形式展示的简短内容。
  • Bold[h]：可能与头条共用[h]标识，表示该内容的标题或摘要需要以加粗形式显示。
  • Image[p]：Emphasize content with images mainly, or it is necessary to display thumbnails.
  • Jump[j]：Click to jump directly to an external link or specified page, rather than the content detail page.

An important rule is: when calling from the front end of the website, each list (such as an article list module, a slide module) can usually use only one recommended attribute for content filtering.This means that if you want to display 'Headlines' content, you need to set a call area specifically for 'Headlines' and cannot filter out both 'Headlines' and 'Slides' content within the same call area.

How to call documents with recommendation attributes in templates

The template system of AnQi CMS implements content calls through tags (Tag). To display documents with specific recommendation properties, we mainly usearchiveListTag. This tag feature is powerful, it can filter documents according to various conditions, includingflagParameter, used specifically to specify recommendation attributes.

1. UseflagFilter documents with specific attributes

archiveListTagsflagThe parameter allows you to pass the letter identifier of the recommended attribute, thus filtering out only the documents with that attribute.

Example: Calling the document list with the 'Headline' attribute

If you want to display the latest 5 top news articles on the homepage of the website, you can write the template code like this:

<div class="headline-section">
    <h2>最新头条</h2>
    <ul>
        {% archiveList archives with flag="h" limit="5" %}
            {% for item in archives %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
            {% empty %}
                <li>暂无头条文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

In this code block:

  • flag="h": means that we only want to retrieve documents marked as 'top news'.
  • limit="5"：Limited the number of displayed documents to 5.
  • item.Linkanditem.Title：Used to obtain the link and title of the document.

Example: Call documents with the "slide" attribute as a carousel.

For slides, it is usually necessary to display images and titles. At this time, we will use the document'sLogoorThumbfield.

<div class="slideshow-container">
    {% archiveList slideshows with flag="f" limit="3" %}
        {% for item in slideshows %}
            <div class="slide-item">
                <a href="{{ item.Link }}"><img src="{{ item.Logo }}" alt="{{ item.Title }}"></a>
                <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
            </div>
        {% empty %}
            <p>暂无幻灯片内容。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

Here we usedflag="f"to filter the slide document and useitem.Logo（通常是文档的大图或主图）to display the image. IfLogonot available or you want to use a thumbnail, you can also useitem.Thumb.

2. Show the recommended property text labels of the document (showFlag)

Sometimes, you might want to display a small label next to the document title, such as “[Headline]” or “[Recommended]”, to clearly inform visitors of the attributes of the content. At this time, you canarchiveListtag.showFlag=trueParameter.

<div class="recommended-list">
    <h2>编辑推荐</h2>
    <ul>
        {% archiveList recommendedDocs with flag="c" limit="10" showFlag=true %}
            {% for item in recommendedDocs %}
                <li>
                    {% if item.Flag %}<span class="content-flag">【{{ item.Flag }}】</span>{% endif %}
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                </li>
            {% empty %}
                <li>暂无推荐内容。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

In the above code,showFlag=trueEnablesitem.FlagThe variable can retrieve the recommended text attribute of the document (such as “Top News”, “Recommended”, etc.). You can beautify it into an eye-catching label or badge according to your CSS style.

Three, combined with practical application cases

PassflagFlexible parameter usage can create various content display areas for websites:

  1. Homepage 'Focus Picture' or 'Large Picture Carousel' Usually filtering:flag="f"(Slide) property document, displaying its image and title, forming the most eye-catching area of the website.

  2. Home page 'Top News' module Filter:flag="h"(Headline) Document of attributes, displaying the latest several important articles in list form.

  3. Sidebar "Editor's Recommendations" or "Hot Recommendations" Filter:flag="c"(Recommended) orflag="a"(Recommended) Document of attributes, using concise title lists to attract users to click.

  4. The "Related Reading" on the article detail page AlthougharchiveListTags themselves supporttype="related"Get related documents, but you can also combineflagparameters, such as prioritizing those marked as "recommended" in related documents.

Chapter 4: Optimization and Precautions

  • Property setting accuracyEnsure that the recommended properties set for the document in the background are accurate and meaningful, to avoid random marking causing confusion in the front-end content.
  • Consistency in image sizeEspecially for slides or focus images, it is recommended to upload images of uniform size, or configure the 'thumbnail processing method' and 'thumbnail size' in the 'Content Settings' of Anqi CMS to ensure the front-end display is beautiful.
  • CSS style beautificationThe template tag is only responsible for calling and outputting content. The specific layout, font size, color, and other visual presentations need to be controlled through CSS styles.
  • Avoid abuse: Too many recommended attributes may distract users' attention. Reasonably plan the website layout, placing different attribute content in the most