AnQiCMS的“推荐属性”功能如何在前端实现文章的分类显示（如头条、推荐）？

AnQiCMS 为网站内容的组织和展示提供了丰富而灵活的工具，其中“推荐属性”功能就是一项非常实用的设计。它允许我们为文章添加特殊的标识，以便在网站前端进行分类显示，比如突出显示“头条”文章，或者在特定区域展示“推荐”内容。

理解“推荐属性”

AnQiCMS 的“推荐属性”本质上是文章的元数据标记，用于描述文章的特性或重要程度。在后台内容管理界面，当你编辑或发布文章时，可以在文章详情页找到“推荐属性”设置项。这里提供了多种预设的属性，每个属性都有一个简洁的代号：

• 头条 [h]: 通常用于网站最重要、最受关注的文章。
• 推荐 [c]: 指代被编辑或系统推荐的优质内容。
• 幻灯 [f]: 适用于在首页轮播图或其他图片展示区域出现的文章。
• 特荐 [a]: 具有特殊推荐价值的内容。
• 滚动 [s]: 适合在滚动新闻条或公告栏中显示的文章。
• 加粗 [h]: 强调文章标题，使其更醒目（注意与“头条”的代号相同，通常通过样式区分）。
• 图片 [p]: 标示文章包含重要图片，适合图片列表或画廊展示。
• 跳转 [j]: 通常用于外部链接或需要特殊处理的跳转文章。

你可以为一篇文章选择一个或多个推荐属性。通过勾选这些属性，你就可以为文章贴上“标签”，方便在前端模板中进行精确调用和展示。

前端模板中的实现原理

要在网站前台根据这些推荐属性来分类显示文章，核心在于使用 AnQiCMS 提供的 archiveList 模板标签。这个标签是 AnQiCMS 用于获取文章列表的万能工具，它通过灵活的参数设置，可以满足各种文章筛选需求。

其中，flag 参数就是专门用来筛选带有特定“推荐属性”的文章的。当你需要显示某一类推荐文章时，只需在 archiveList 标签中指定对应的 flag 代号即可。

例如，如果你想在一个区域显示所有被标记为“头条”的文章，你会在 archiveList 标签中这样写：flag="h"。

需要注意的是，在单个 archiveList 标签的调用中，只能指定一个 flag 属性来进行筛选。如果你的网站需要同时显示不同推荐属性的文章列表（比如一个区域显示“头条”，另一个区域显示“推荐”），则需要分别使用不同的 archiveList 标签来获取。

一旦 archiveList 标签获取到文章列表，我们通常会使用 for 循环标签来遍历每一篇文章数据，并将其标题、链接、简介、缩略图等信息逐一呈现在网页上。

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

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

假设我们希望在网站首页的不同区域，分别显示“头条文章”列表和“推荐文章”列表。

1. 显示“头条文章”列表

我们可能想在页面顶部或者一个显眼的位置，展示最新的 5 篇“头条”文章。

在你的模板文件（例如 index.html 或 partial/main_content.html）中，你可以这样编写代码：

<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>

这段代码通过 flag="h" 参数明确告诉 archiveList 标签只获取标记为“头条”的文章。limit="5" 则限制了显示数量为 5 篇。在 for 循环内部，item.Link 获取文章链接，item.Title 获取文章标题，item.Thumb 获取缩略图，item.Description 获取文章简介，stampToDate 标签则将时间戳格式化为可读日期。

2. 显示“推荐文章”列表

接着，我们可能想在另一个区域，展示 10 篇“推荐”文章。

”`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