In website operation, we often need to make certain important content stand out on the homepage or specific areas to attract visitors' attention, such as the latest headline news, exquisite product slides, or urgent notification announcements.AnQiCMS provides a very intuitive and efficient mechanism to handle this requirement, that is, "recommended attributes".
What are the recommended properties?
In AnQiCMS, recommended properties are like 'tags' for content, allowing you to mark articles, products, events, and other content with specific tags to inform the system that they should be treated differently and displayed in a special way at different locations on the website.These properties are preset to meet common website content display needs.
AnQiCMS built-in multiple recommendation attributes, each attribute corresponds to a short letter code, which is convenient to call in the template: English
- Headline [h]：usually used in the most important and most prominent position of the website, such as the large news on the homepage.
- Recommend [c]：indicates that the content has high recommendation value and is suitable for display in the sidebar, related content area.
- Slideshow [f]：常用于需要以轮播图形式展示的内容，例如首页顶部的大图滚动。
- [en] Recommended [a]：特指特别推荐的内容，可能比普通推荐更重要。
- [en] Scroll [s]：适用于需要以跑马灯或滚动列表形式展示的短消息或通知。
- 加粗 [English]：在某些设计中，可能用于在列表中将标题以粗体显示，以示突出。
- [en] Image [p]Ensure that the content always displays a thumbnail when listed, even if there is no image in the content, the system will try to use the default image.
- [en] Jump [j]Set the link of the content to an external link, which will jump to another website or page when clicked.
How to set recommended attributes for content in the background?
Set these recommended properties very simply.When you enter the AnQiCMS admin panel, you will see a section named 'Recommended Attributes' when publishing or editing any document (such as articles, products).This area is typically presented in the form of a multi-selection box, listing all available properties and their corresponding functions.
You can select one or more properties based on the characteristics of the content and the display priority.For example, you might check 'Headline[h]' for a particularly important news article; if it also needs to appear in the homepage carousel, you can also check 'Slide[f].'If you only want to force a certain article to display with an image in the list, even if there is no image in the content, you can check the option 'Image[p]'.These properties can be freely combined, of course, you can also choose not to set any properties, allowing the content to be displayed in a normal way.
How to call and display these special contents in the front-end template?
The properties are not set enough, we also need to tell the website template how to retrieve and display the content based on these properties. The core tool in AnQiCMS templates isarchiveListTags, it is responsible for retrieving the content list from the database. To filter content using recommendation attributes, we need to inarchiveListthe label useflagParameter.
For example, if you want to display all articles marked as
{# 首页头条区展示 #}
<div class="headlines-section">
<h2>头条新闻</h2>
{% archiveList topHeadlines with type="list" flag="h" limit="5" %}
{% for item in topHeadlines %}
<div class="headline-item">
<a href="{{ item.Link }}">
<h3>{{ item.Title }}</h3>
<p>{{ item.Description|truncatechars:100 }}</p>
</a>
</div>
{% endfor %}
{% endarchiveList %}
</div>
Here are theflag="h"It is to tell the system to only retrieve those contents with the 'Top Story' attribute, andlimit="5"Limited to displaying the latest 5.
For example, if your homepage has a slideshow area that needs to display articles marked as "slideshow[f]":
{# 幻灯片/轮播图区展示 #}
<div class="carousel-section">
<div id="homepage-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% archiveList slideshowItems with type="list" flag="f" limit="3" %}
{% for item in slideshowItems %}
<div class="carousel-item {% if forloop.Counter == 1 %}active{% endif %}">
<img src="{{ item.Logo }}" alt="{{ item.Title }}">
<div class="carousel-caption">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description|truncatechars:150 }}</p>
</div>
</div>
{% endfor %}
{% endarchiveList %}
</div>
{# 这里可以添加轮播控制按钮和指示器 #}
</div>
</div>
It is worth noting that,flagParameters can only specify one attribute at a time. If you need to retrieve content with multiple attributes simultaneously, you need to call it multiple timesarchiveListTags, or combine them through other logic on the front end.
About the supplement of pure image slides:
If you just need a pure image carousel display and not associated with specific article content, AnQiCMS also providesbannerListTag. You can upload and manage image groups in the related settings such as "Website Navigation" or "Page Resources" in the background, and then use them in templates.bannerListLabel and specify a group name to call, for example:
{# 纯图片Banner幻灯片展示，假设后台设置了“首页幻灯”分组 #}
<div class="banner-carousel">
{% bannerList banners with type="首页幻灯" %}
{% for item in banners %}
<a href="{{ item.Link }}" target="_blank">
<img src="{{ item.Logo }}" alt="{{ item.Alt }}">
</a>
{% endfor %}
{% endbannerList %}
</div>
These two methods have their own focus,archiveListCombineflagSuitable for displaying recommended content with articles,bannerListMore suitable for pure visual element promotion.
Flexible application and **practice
These recommendations