Manage website content in Anqi CMS and make important information stand out to users, which is the key to improving user experience and content marketing effectiveness.Among them, the configuration of the recommended attributes of the article and the front-end display are important functions to achieve this goal.By setting it up reasonably, you can easily display articles like "Headlines" and "Slides" in different positions on the website to attract visitors' attention.
The first part: Set the recommendation attributes for the article in the background
Firstly, we need to enter the Anqi CMS backend management interface to assign the 'recommendation attributes' to specific articles.
You can find "Content Management" in the left navigation bar, then select "Publish Document" or "Document Management" to edit existing articles.After entering the article editing page, you will see a series of setting options.There is a section named "recommended attribute".
AnQi CMS provides eight preset recommended attributes, each attribute is identified by a letter code, which is convenient for you to call accurately in the front-end template:
- Headline [h]: Typically used in the most prominent position on a website, such as the top header article on the homepage.
- Recommend [c]: Suitable for regular recommendation positions, such as sidebars, recommended articles in lists.
- Slide [f]: Designed specifically for carousels, suitable for displaying as image slides on the homepage or specific pages.
- Special recommendation [a]: Indicates a special recommendation, with importance between headlines and ordinary recommendations.
- Scroll [s]: Suitable for news tickers or bulletin boards, content will be displayed in a scrolling manner.
- Bold [b]: The article title will be displayed in bold style in the list, emphasizing the content.
- Image [p]: Indicates that the article contains important images that may require special display styles.
- Jump [j]If clicking on an article needs to jump to an external link instead of the article detail page, this attribute can be used.
When setting recommended attributes for an article, you can select one or more attributes based on the importance of the article and its suitable display method.For example, an extremely important article, you may want it to be displayed on the homepage in a slide show format, and also appear as a recommended article in other places. In this case, you can check both 'Slide [f]' and 'Recommended [c]'.After selecting, don't forget to save the article, so the recommended properties take effect.
Part two: Call and display recommended articles in the front-end template.
Next, we will learn how to call and display articles in the website's front-end template based on these recommended properties.The AnQi CMS template tag system makes this process very intuitive.We mainly usearchiveListTag to get the list of articles and throughflagParameter to specify the recommended attribute to be called.
You need to edit the template files of the website, which are usually located/templateIn the directory of the theme folder you are currently using. If you are not sure how to edit the template, you can first try online editing in the "Template Design" feature on the back end, or consult the help documents related to "Template Creation".
Here are some common scenarios and code examples of recommended articles displayed in different front-end areas:
1. Display the "headline" article at the top of the homepage
The headline area on the homepage usually only has one article, which requires prominence. You can call the article that is set with the "headline [h]" attribute like this:
{# 假设这是你的首页模板文件，例如 index/index.html #}
<div class="main-headline">
{% archiveList headlines with type="list" flag="h" limit="1" order="id desc" %}
{% for item in headlines %}
<a href="{{ item.Link }}" class="headline-link">
<img src="{{ item.Logo }}" alt="{{ item.Title }}" class="headline-image">
<h1 class="headline-title">{{ item.Title }}</h1>
<p class="headline-description">{{ item.Description }}</p>
</a>
{% empty %}
<p>暂无头条文章。</p>
{% endfor %}
{% endarchiveList %}
</div>
Here, we useflag="h"To specify the headline article,limit="1"Limit to displaying only one article,order="id desc"ensuring that the latest published headline article is displayed.item.Logowill automatically obtain the cover thumbnail of the article.
2. Display "slide" articles in the slide area.
The carousel area of the website often needs to display multiple articles in a picture with title form in a loop. For articles that have set the "slide [f]" attribute, you can call it like this:
{# 幻灯片区域的HTML结构，通常会配合JavaScript轮播库使用 #}
<div class="carousel-container">
<div class="swiper-wrapper">
{% archiveList slides with type="list" flag="f" limit="5" order="sort desc" %}
{% for item in slides %}
<div class="swiper-slide">
<a href="{{ item.Link }}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="slide-image">
<div class="slide-caption">
<h3>{{ item.Title }}</h3>
</div>
</a>
</div>
{% empty %}
<p>暂无幻灯片文章。</p>
{% endfor %}
{% endarchiveList %}
</div>
{# 其他轮播导航/分页器元素 #}
</div>
Here, flag="f"Filter out slide articles,limit="5"Get up to five articles,order="sort desc"It will display according to the article sorting priority you set in the background.item.ThumbIt will automatically retrieve the article thumbnail.
3. Display 'Recommended' articles in the sidebar
The sidebar is usually used to display some popular or featured articles. Articles with 'Recommended [c]' set are ideal choices:
{# 侧边栏推荐模块 #}
<div class="sidebar-module recommended-articles">
<h2>推荐阅读</h2>
<ul>
{% archiveList recommended with type="list" flag="c" limit="10" order="views desc" %}
{% for item in recommended %}
<li>
<a href="{{ item.Link }}">{{ item.Title }}</a>
<span>({{ item.Views }} 阅读)</span>
</li>
{% empty %}
<li>暂无推荐文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
Here we useflag="c"Get recommended articles,limit="10"Display ten articles, andorder="views desc"Making the articles with the highest views displayed first, which is very suitable for the “Hot Recommendations” scenario.
4. Bold the title of a specific article in the article list
If you want some important articles to stand out in a regular article list, you can use the "bold [b]" attribute. However, it is important to note that,flagThe parameter is inarchiveListYou can only specify one attribute at a time. If you want tothe sameDisplay all articles in the list and make the article titles with the "bold" attribute bold, you cannot directly inarchiveListuse it inflag="b"Filter it (because it will only display bold articles).
A more flexible approach is to first get the list of articles, then in the loop, determine whether each article has the "bold" attribute. This requiresshowFlag=trueParameters to letitem.FlagField available:
{# 常规文章列表，同时加粗显示特殊文章 #}
<ul class="article-list">
{% archiveList articles with type="page" limit="15" showFlag=true %}
{% for item in articles %}
<li>
{# item.Flag 是一个字符串，包含所有设置的flag字母，例如 "hc" #}
<a href="{{ item.Link }}" class="{% if item.Flag|contain:"b" %}font-bold{% endif %}">
{{ item.Title }}
</a>
<span> - {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</li>
{% empty %}
<li>暂无文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
In this example,showFlag=trueEnablesitem.FlagField contains all recommended attributes of the article (such as “hc”). We usecontainjudge.item.FlagWhether it contains the letter “b”, if it does, then add the link tofont-boldClass, to implement bold effect.
Some general parameter prompts:
moduleIdIf you have multiple content models (such as articles, products),