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.htmlpartial/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