Managing website content in Anqi CMS and making important information stand out to users is the key to improving user experience and the effectiveness of content marketing.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 up properly, you can easily display articles like "Headlines" and "Slides" in different positions on the website, attracting visitors' attention.
First part: Set recommended attributes for articles in the background
Firstly, we need to enter the Anqi CMS backend management interface to assign 'recommended 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.Among them, there is an area named “Recommended Attributes”.
Anqi CMS provides eight preset recommended attributes, each attribute is identified by a letter code, making it convenient for you to accurately call it in the frontend template:
- Headline [h][en] Typically used in the most prominent position of a website, such as the top headline article on the homepage.
- Recommend [c][en] Suitable for regular recommendation slots, such as in sidebars or recommended articles in the list.
- Slideshow [f]: Designed specifically for carousels, suitable for displaying as image slides on the homepage or specific pages.
- [en] Recommended [a]: Indicates special recommendation, which may be between the importance of headlines and ordinary recommendations.
- [en] Scroll [s]Applicable to news scrollbars or bulletin boards, content will be displayed in a scrolling manner.
- 加粗 [b] 【en】The article title will be displayed in bold in the list, emphasizing its importance.
- [en] Image [p]: Indicates that the article contains important images, which may require special image display styles.
- [en] Jump [j]: If clicking the 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 choose one or more attributes based on the importance of the article and its suitable display style.For example, an extremely important article, you may want it to be displayed as a slideshow on the homepage and also as a recommended article elsewhere. In this case, you can check both 'Slideshow [f]' and 'Recommended [c}'.After selecting, don't forget to save the article, so the recommendation properties take effect.
Second part: Call and display recommended articles in the front-end template
Next, we will learn how to call and display articles in the website's frontend template based on these recommended properties.The template tag system of Anqi CMS makes this process very intuitive.archiveListto get the list of articles, and throughflagparameters to specify the recommended properties to be called.
You need to edit the website template files, which are usually located in/templateIn the theme folder you are currently using.If you are not sure how to edit the template, you can first try to edit online in the 'Template Design' feature in the background, or consult the help documents related to 'Template Creation'.
Here are some common scenarios and code examples for displaying recommended articles in different front-end areas:
1. Display 'Headlines' articles at the top of the homepage
The top news area on the homepage usually only has one article, and it requires the most prominence. You can call the article with the 'Top [h]' attribute in this way:
{# 假设这是你的首页模板文件，例如 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 top news article,limit="1"Show only one article restriction.order="id desc"Ensure that the latest published headline article is displayed.item.LogoWill automatically get the cover image of the article.
2. Display "Slide" articles in the slideshow area.
The carousel area of a website often needs to display multiple articles in a cycle with images and titles. For articles set with the '幻灯 [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 articles according to the priority of article sorting set in the background.item.ThumbIt will automatically get the thumbnail of the article.
3. Display 'Recommended' articles in the sidebar
The sidebar is typically used to showcase some popular or featured articles. Articles set to 'Recommended [c]' are a perfect choice:
{# 侧边栏推荐模块 #}
<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"to get recommended articles,limit="10"displaying ten articles,order="views desc"so that the articles with the highest views are displayed first, which is very suitable for the 'Hot Recommendations' scenario.
4. In the article list, display the specific article title in bold
If you want certain important articles to be highlighted in the regular article list, you can use the "bold [b]" attribute. However, it should be noted that,flagParameter inarchiveListEach time, only one attribute can be specified. If you want tothe samelist to display all articles, and make the titles of articles with the 'bold' attribute bold, you cannot directly usearchiveListinflag="b"[Translate to en: Filter it (because it will only display bold articles).]
A more flexible approach is to first get the list of articles, then judge in the loop whether each article has the 'bold' attribute. This requiresshowFlag=trueParameters to letitem.FlagFields 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.FlagFields include all recommended properties of the article (such as “hc” ). We usecontainfilters to judgeitem.FlagWhether it contains the letter “b”, if it contains, then addfont-boldClass, to implement bold effect.
Some common parameter prompts:
moduleId: If you have multiple content models (such as articles, products),