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