How to display recommended attributes (such as headlines, recommendations, sliders) in article lists or detail pages?
In AnQi CMS, in order to make your website content more attractive and able to flexibly display articles of different importance levels or display forms, the system provides the "recommended attribute" feature.By cleverly utilizing these properties, you can easily tag content on article lists or detail pages with 'headline', 'recommended', 'slideshow', and other tags, thereby guiding users' attention and enhancing the effectiveness of content marketing.
This guide will take you in-depth to learn how to set and use these recommended properties in AnQiCMS, making your website content management more convenient.
Understand the recommended attributes and their functions
First, let's get to know these recommended properties.In the AnQiCMS backend, when you add or edit a document, you will see an option for 'Recommended Attributes'.
- Headline [h]: Usually used for the most important and most concerned news or articles on the homepage, attracting the user's first glance.
- Recommend [c]: Marked as high-quality, content worth reading, often appears in the sidebar, related recommendations area.
- Slide [f]: Designed specifically for carousels, articles with this attribute will typically extract the cover image, and play in the large image display area in a loop.
- Special recommendation [a]: Further than 'Recommended', usually selected in-depth content by the editor.
- Scroll [s]: Suitable for notifications, announcements, and other information that needs to be displayed scrolling in a specific area.
- Image [p]: Emphasize content primarily with images, or highlight images when displaying in a list.
- Jump [j]When the article is clicked, it does not enter the article detail page but directly jumps to the preset external link, which is very suitable for advertising or referencing external resources.
The essence of these properties is to label your content with different types of "tags", convenient for you to filter and display on the front-end page according to your needs.A content can have multiple recommended attributes at the same time, for example, an article can be both a 'headline' and a 'slider', which means it can be displayed in the headline area as well as part of the carousel.
Two, set the recommendation attributes of the content in the background
The recommended property is very intuitive.When you log in to the AnQiCMS backend, go to the 'Content Management' module, select 'Add Document' or edit an existing document, you will see the 'Recommended Attributes' section.
You just need to check the corresponding properties.For example, if you want a newly published article to be the headline news on the homepage and also displayed in the carousel, you can check both 'Headline[h]' and 'Slide[f]'.The system will automatically apply these tags to this content after you save the article.
Three, display and filter the recommendation attributes content on the article list page
On the front end of the website, the article list page is an important window for displaying content. AnQiCMS provides flexible template tagsarchiveList, allowing you to filter and display content based on recommended attributes.
1. Filter the list of recommended attributes
Suppose you want to display "Top Stories" articles in a special area on the homepage or show "Recommended" content in the sidebar, you can do it this way:
{# 假设您想获取5篇头条文章 #}
<div class="headline-articles">
<h2>头条新闻</h2>
<ul>
{% archiveList archives with type="list" flag="h" limit="5" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">{{item.Title}}</a>
{# 这里可以根据需要添加发布时间、简介等信息 #}
<span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
</li>
{% empty %}
<li>目前没有头条文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
{# 假设您想在侧边栏展示3篇推荐文章 #}
<div class="recommended-articles">
<h3>推荐阅读</h3>
<ul>
{% archiveList recommendations with type="list" flag="c" limit="3" %}
{% for item in recommendations %}
<li><a href="{{item.Link}}">{{item.Title}}</a></li>
{% empty %}
<li>暂无推荐文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
In the code above,flag="h"Used to filter articles with the "Headline" attribute, andflag="c"then used to filter articles with the "Recommended" attribute. You just need to replaceflagthe value of the parameter with the corresponding attribute letter (such asfrepresenting slides,jRepresent jump and so on), you can get the list of articles with different properties.
2. Directly display the recommended attribute tags in the list items.
In addition to filtering, you may also want to add an eye-catching icon or text mark to articles with specific recommended attributes in the normal article list, so that users can recognize them at a glance. At this point, we need toarchiveListinside the loop, usingitem.FlagField to judge.
item.FlagIt will return a string containing all the recommended attribute letters set in the article. We can usecontaina filter to check if it contains specific attribute letters.
<div class="all-articles-with-badges">
<h2>全部文章</h2>
<ul>
{% archiveList articles with type="list" limit="10" showFlag=true %}
{% for item in articles %}
<li>
<a href="{{item.Link}}">
{% if item.Flag|contain:"h" %}
<span class="badge headline-badge">头条</span>
{% elif item.Flag|contain:"c" %}
<span class="badge recommended-badge">推荐</span>
{% elif item.Flag|contain:"f" %}
<span class="badge slideshow-badge">幻灯</span>
{% endif %}
{{item.Title}}
</a>
</li>
{% empty %}
<li>暂无文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
Please note that to obtainitem.Flagyou need toarchiveListthe tag withshowFlag=trueParameter.
In this way, each item in the article list will dynamically display the corresponding tag based on its recommended attributes, greatly enhancing the readability and visual appeal of the content. Of course, you will also need some CSS styles to beautify thesebadge.
Four, display recommended property tags on the article detail page
On the article detail page, you can also display corresponding tags or information based on the recommended properties of the current article. This is similar to the logic on the list page, but we use it directly.archiveThe object representing the current article'sFlagfield.
<article class="article-detail">
<h1>{{archive.Title}}</h1>
<div class="article-meta">
发布时间：{{stampToDate(archive.CreatedTime, "2006年01月02日")}}
{% if archive.Flag|contain:"h" %}
<span class="badge detail-headline">头条新闻</span>
{% endif %}
{% if archive.Flag|contain:"c" %}
<span class="badge detail-recommended">小编推荐</span>
{% endif %}
{% if archive.Flag|contain:"j" %}
<span class="badge detail-jump">（点击此文将跳转到外部链接）</span>
{% endif %}
{# 您可以在这里继续添加其他属性的判断 #}
</div>
<div class="article-content">
{{archive.Content|safe}}
</div>
</article>
Here, we use{{archive.Flag|contain:"h"}}To determine whether the current article contains the 'Headline' attribute and display the 'Headline News' marker accordingly.Even if the user enters the detail page, they can clearly know the importance or particularity of this content.