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

In content operation, displaying important or recommended content in a prominent way to visitors is the key to improving user experience and the efficiency of content reach.AnQiCMS (AnQiCMS) offers a powerful "recommendation attribute" feature that allows you to easily mark and manage different types of featured content, such as setting it as a top 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 Anqi CMS websites.

1. Understand the recommended properties of Anqi CMS documents

Firstly, we need to clarify what the 'recommended attributes' in Anqi CMS are, as well as how they are set up in the background.

In the AnQi CMS backend management interface, when you add or edit documents, you will find an option called "recommended properties".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 attributes for the document based on the nature of the content.

These commonly used recommended attributes and their letter identifiers include:

  • Headline[h]This is usually used for the most important and most concerned news or articles on the website homepage.
  • Recommended[c]It refers to the selected and worth-paying attention to the content edited.
  • Slide[f]: Content suitable for display in a carousel or slideshow, usually accompanied by exquisite images.
  • Featured[a]: Content specially recommended, emphasizing its importance more than ordinary recommendations.
  • Scrolling[s]: Suitable for displaying brief content in sidebars, notification areas, and other scrolling forms.
  • Bold[h]: May be shared with the headline.[h]: Indicates that the title or summary of the content should be displayed in bold.
  • Image[p]Emphasize content with images mainly, or thumbnails need to be displayed.
  • Jump[j]Clicking will directly jump to an external link or specified page, not the content detail page.

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

How to call a document with recommended properties in a template

The Anqi CMS template system implements content calls through tags. To display documents with specific recommendation properties, we mainly usearchiveListLabel. This label function is powerful, and it can filter documents based on various conditions, includingflagparameters, which are specifically used to specify recommendation properties.

1. Useflagparameters to filter documents with specific properties

archiveListlabel'sflagParameters allow you to pass in the letter identifier corresponding to the recommended attribute, thus filtering out only the documents that have that attribute.

Example: Call the document list with the 'Headline' attribute.

Assuming you want to display the latest 5 top articles on the homepage of your 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 we only want to get the documents marked as "top".
  • limit="5"Limited the number of displayed documents to 5.
  • item.Linkanditem.TitleUsed to obtain the link and title of the document.

Example: Call documents with the 'slideshow' attribute as a carousel.

For a slide, it is usually necessary to display images and titles. At this point, 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>

We used hereflag="f"to filter the slide document and useitem.Logo(usually the large image or main image of the document) to display the image. IfLogonot available or you want to use a thumbnail, you can also useitem.Thumb.

2. Display the recommended attribute text label of the document (showFlag)

Sometimes, you may want to display a small label next to the document title, such as "[Top News]" or "[Recommended]", to clearly inform visitors of the content's attributes. At this point, you canarchiveListthe tag withshowFlag=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 obtain the recommended attribute text 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.

Chapter 3: Application cases combining actual scenarios

ByflagFlexible use of parameters, which can create various content display areas for websites:

  1. Homepage "Focus Image" or "Large Image Carousel": Normally filteringflag="f"(Slide) property document, displaying its image and title, forming the most eye-catching area of the website.

  2. Homepage "Top News" module: Filterflag="h"(Headline) Property document, displaying the latest several重磅 articles in list form.

  3. Sidebar "Editor's Recommendation" or "Hot Recommendation": Filterflag="c"(Recommended) orflag="a"Recommended property document, use a concise list of titles to attract users to click.

  4. The "Related Reading" on the article detail pageAlthougharchiveListThe tag itself supportstype="related"To get relevant documents, but you can also combineflagParameters, for example, prioritize displaying those marked as 'recommended' in relevant documents.

4. Optimization and Points to Note

  • Accuracy of property settingsMake sure that the recommended properties set for the document in the background are accurate and meaningful, to avoid random tagging that can lead to confusion in the front-end content.
  • Image size consistency: Especially for slideshows 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 a beautiful display on the front end.
  • CSS style beautificationThe template tag is responsible for calling and outputting content, and the specific layout, font size, color, and other visual presentations need to be controlled by CSS styles.
  • Avoid abuse：Too many recommended properties may distract the user's attention. Reasonably plan the website layout, placing the content of different properties in the most