How to implement the classification display of articles (such as headlines, recommendations) in the frontend of AnQiCMS's 'Recommended Attributes' feature?

AnQiCMS provides rich and flexible tools for organizing and displaying website content, among which the 'recommended attribute' feature is a very practical design.It allows us to add special identifiers to articles for classification display on the website frontend, such as highlighting 'Headline' articles or displaying 'Recommended' content in specific areas.

Understanding 'Recommended Attributes'

The 'Recommended Attributes' of AnQiCMS is essentially the metadata tags of articles, used to describe the characteristics or importance of the articles.In the background content management interface, when you edit or publish articles, you can find the "Recommended Properties" setting option on the article details page.

  • Headline [h]: Usually used for the most important and most concerned articles on the website.
  • Recommend [c]: Indicates high-quality content that has been edited or recommended by the system.
  • Slideshow [f]: 适用于在首页轮播图或其他图片展示区域出现的文章。
  • [en] Recommended [a]: 具有特殊推荐价值的内容。
  • [en] Scroll [s]: 适合在滚动新闻条或公告栏中显示的文章。
  • 加粗 [English]: 强调文章标题，使其更醒目（注意与“头条”的代号相同，通常通过样式区分）。
  • [en] Image [p]: 标示文章包含重要图片，适合图片列表或画廊展示。
  • [en] Jump [j]: 通常用于外部链接或需要特殊处理的跳转文章。

You can select one or more recommended properties for an article.By checking these properties, you can tag articles to facilitate precise calling and display in the frontend template.

前端模板中的实现原理

To display articles in categories on the website front-end based on these recommended properties, the core lies in using the AnQiCMS providedarchiveListTemplate tag. This tag is used by AnQiCMS to obtain the article list, and it can meet various article filtering needs through flexible parameter settings.

Among them,flagThe parameter is specifically used to filter articles with specific "recommended properties". When you need to display a certain type of recommended article, just specify the correspondingarchiveListlabel.flagcode.

For example, if you want to display all articles marked as "top news" in a region, you will write it like this:archiveListThe tag should be written as:flag="h".

It should be noted that in a singlearchiveListThe call of the label can only specify oneflagProperty to filter. If your website needs to display a list of articles with different recommended properties at the same time (such as one area displaying "Headline" and another area displaying "Recommended"), you need to use different properties separately.archiveListyou can get it by tag.

OncearchiveListLabel gets the article list, we usually useforloop through the labels to traverse each article data, and present the title, link, introduction, thumbnail and other information one by one on the web page.

实战：在网页中分类显示文章

让我们通过几个具体的例子，看看如何在 AnQiCMS 的模板中实现文章的分类显示。

Assuming we want to display the 'Headline Articles' list and the 'Recommended Articles' list in different areas of the website homepage.

1. Display the 'Headline Articles' list

We may want to display the latest 5 "top news" articles at the top of the page or in a prominent position.

in your template file (for example)index.htmlorpartial/main_content.html）In it, you can write the code like this:

<section class="headline-articles">
    <h2>头条文章</h2>
    <ul>
        {% archiveList headArticles with type="list" flag="h" limit="5" %}
            {% for item in headArticles %}
            <li>
                <a href="{{item.Link}}">
                    {% if item.Thumb %}
                        <img src="{{item.Thumb}}" alt="{{item.Title}}">
                    {% endif %}
                    <h3>{{item.Title}}</h3>
                    <p>{{item.Description|truncatechars:80}}</p>
                </a>
                <span>发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            </li>
            {% empty %}
            <li>暂无头条文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</section>

This code achieves that byflag="h"The parameters clearly indicatearchiveListLabels only fetch articles marked as 'Top News'.limit="5"Then it limits the displayed number to 5 articles.forInside the loop,item.LinkGet article link,item.TitleTo get the article title,item.ThumbGet the thumbnail,item.Descriptionto get the article summary,stampToDateThe label formats the timestamp into a readable date.

2. Display the 'Recommended Articles' list

Then, we might want to display 10 "recommended" articles in another area.

`twig

<h2>推荐阅读</h2>
<div class="articles-grid">
    {% archiveList recommendArticles with type="list" flag="c" limit="10" %}
        {% for item in recommendArticles %}
        <article class="article-card">
            <a href="{{item.Link}}">
                {% if item.Logo %}
                    <div class="article-cover">
                        <img src="{{item