How to control the special display of content on the homepage or other blocks (such as headlines, sliders)?
In website operation, we often need to make certain important content stand out on the homepage or in 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, namely 'recommended attributes'.
What is the recommended attribute?
In AnQiCMS, recommended properties are like 'tags' for content, you can mark articles, products, events, and other content with specific tags to tell the system that they should be treated differently, and displayed in special ways at different positions on the website.These properties are preset to meet the common needs of website content display.
AnQiCMS built-in a variety of recommendation attributes, each attribute corresponds to a short letter code, convenient for calling in templates:
- Headline [h]This is typically used in the most important and most prominent position on a website, such as the large news on the homepage.
- Recommend [c]This indicates that the content has high recommendation value and is suitable for display in the sidebar or related content area.
- Slide [f]: Often used for content that needs to be displayed in a carousel format, such as the large image scroll at the top of the homepage.
- Special recommendation [a]: Specifically refers to content that is particularly recommended, which may be more important than regular recommendations.
- Scroll [s]: Suitable for short messages or notifications that need to be displayed in a marquee or scrolling list.
- Bold [h]: May be used in some designs to display titles in bold in lists to highlight them.
- Image [p]Ensure that the content will always display a thumbnail in the list, even if there is no image, the system will try to use the default image.
- Jump [j]Set the content link as an external link, which will jump to another website or page when clicked.
How to set recommended attributes for content in the background?
It is very simple to set these recommended properties. When you enter the AnQiCMS backend, in the interface for publishing or editing any document (such as articles, products), you will see a section named "Recommended Properties".This area is usually presented in the form of a checkbox, listing all available properties and their corresponding functions.
You can select one or more properties based on the characteristics and display priority of the content.For example, a particularly important news article, you might check 'Top News [h]';If it needs to appear in the homepage carousel as well, you can also check the "Slide[f]".If you only want to force an article to display with an image in the list, even if there is no image in the content, you can check the 'Image[p]'.These properties can be freely combined, of course, you can also choose not to set any properties, so that the content is displayed in the normal way.
How to call and display these special contents in the front-end template?
It's not enough to set the properties, 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 isarchiveListThe label is responsible for retrieving the content list from the database. To use recommendation attributes to filter content, we need to inarchiveListUsed in tagsflagParameter.
For example, if you want to display all articles marked as "top news[h]" in a "top news" area on the homepage, you can write the code in the template like this:
{# 首页头条区展示 #}
<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>
Hereflag="h"It is to inform the system to only retrieve the content that is marked with the 'headline' attribute, andlimit="5"restricted to displaying the latest 5 entries.
For example, if your website homepage has a picture slideshow area that needs to display articles marked as "slide[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 should be noted that,flagThe parameter can only be specified once. If you need to retrieve content with multiple attributes at the same time, you need to call it multiple timesarchiveListTags, or combine them through other logic on the front end.
About the supplement to pure picture slides:
If you just need a pure picture carousel display and not associated with specific article content, AnQiCMS also providesbannerListLabel. You can upload and manage image groups in the background under settings such as 'Website Navigation' or 'Page Resources', and then use them in templates.bannerListLabel and specify the 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 respective focuses,archiveListCombineflagIt is suitable for displaying recommendations with article content, whereasbannerListIt is more suitable for pure visual element promotion.
Apply flexibly with **practice
These recommendations