AnQiCMS文章的推荐属性(如头条、幻灯)如何在前端被调用并分类显示?

在网站运营中,如何让那些重要的、精彩的内容脱颖而出,被用户第一时间关注到,是提升用户体验和内容营销效果的关键。AnQiCMS 提供了一套非常实用的推荐属性机制,帮助我们轻松实现内容的分类与突出显示,比如将热门文章设置为“头条”,或是将精选产品呈现在“幻灯”区域。

这篇文章将带你了解 AnQiCMS 文章的推荐属性是如何在后台设置,又如何在前端模板中被灵活调用,从而让你的网站内容展现出更丰富的层次和吸引力。

理解推荐属性:内容运营的利器

在 AnQiCMS 的后台,当我们编辑或发布文章时,会看到一个“推荐属性”的选项。这就像是给文章贴上了一个标签,告诉系统这篇内容具有特殊的推荐价值。这些推荐属性并非仅仅是文字描述,它们背后都对应着一个简短的字母标识,方便我们在前端模板中进行精确调用。

我们常用的推荐属性包括:

  • 头条 [h]:通常用于网站最重要、最受关注的新闻或公告,占据显眼位置。
  • 推荐 [c]:泛指站长认为值得推荐给用户的文章,可能出现在侧边栏、列表页等。
  • 幻灯 [f]:适用于需要在首页轮播图(Carousel/Slider)中展示的内容,通常会配有吸引人的图片。
  • 特荐 [a]:比“推荐”更进一步,强调其独特性或重要性。
  • 滚动 [s]:适合在新闻跑马灯、通知栏等滚动区域显示的内容。
  • 图片 [p]:强调内容以图片为主,或需要特别突出其缩略图。
  • 跳转 [j]:表示点击后会跳转到外部链接或其他指定页面。
  • 加粗 [h]:需要注意的是,文档中也提到了“加粗”属性同样使用 [h]。在实际调用中,flag="h" 会同时匹配被标记为“头条”和“加粗”的文章。这为我们提供了灵活性,但若需严格区分,可能需要结合其他自定义字段来处理。

通过合理设置这些推荐属性,我们可以轻松地将内容划分为不同的展示区域,让用户在浏览网站时能够快速定位到感兴趣的信息。

前端调用:archiveList 标签的魔法

AnQiCMS 的前端模板采用了类似 Django 模板引擎的语法,其中 archiveList 标签是调用文章列表的核心。要将带有特定推荐属性的文章呈现在前端,我们主要会用到 archiveList 标签的一个关键参数:flag

flag 参数允许我们指定想要调用的推荐属性字母。例如,如果你想显示所有被标记为“头条”的文章,就可以在 archiveList 标签中添加 flag="h"

调用文章列表的基本结构通常是这样的:

{% archiveList archives with type="list" flag="h" limit="5" order="id desc" %}
    {% for item in archives %}
        <div class="headline-item">
            <a href="{{item.Link}}">{{item.Title}}</a>
            <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        </div>
    {% empty %}
        <p>暂时没有头条文章。</p>
    {% endfor %}
{% endarchiveList %}

在这段代码中:

  • archiveList archives with ...:我们定义了一个名为 archives 的变量来存储获取到的文章列表。
  • type="list":表示我们只需要一个固定数量的列表,而不是分页列表。如果需要分页,可以设置为 type="page",并结合 pagination 标签使用。
  • flag="h":这正是我们用来指定调用“头条”属性文章的关键。
  • limit="5":限制只显示最新的 5 篇文章。
  • order="id desc":按照文章 ID 降序排列,通常意味着显示最新发布的文章。你也可以根据需要调整为 order="views desc"(按浏览量降序)或 order="sort desc"(按后台自定义排序)。
  • {% for item in archives %} ... {% endfor %}:循环遍历 archives 变量中的每一篇文章,item 代表当前遍历到的文章对象。
  • {{item.Link}}{{item.Title}}:分别输出文章的链接和标题。
  • {{stampToDate(item.CreatedTime, "2006-01-02")}}:这是一个方便的辅助标签,用于将文章的创建时间戳格式化为我们可读的日期格式。
  • {% empty %} ... {% endempty %}:当 archives 列表为空时,显示“暂时没有头条文章”的提示。

需要特别注意的是,在 archiveList 标签中,每次只能指定一个 flag 属性进行调用。这意味着如果你想在一个区域同时显示“头条”和“幻灯”的文章,你需要分别使用两个 archiveList 标签来获取数据,然后再在前端进行整合展示。

实践案例:将推荐属性文章分类显示

让我们通过几个具体的场景,看看如何利用 archiveList 标签和 flag 参数,将不同推荐属性的文章分类呈现在网站上。

场景一:首页的“头条新闻”模块

在网站首页最醒目的位置,我们通常会设置一个“头条新闻”区域,展示最新的、最重要的内容。

<section class="headline-news">
    <h2>头条新闻</h2>
    <div class="news-list">
        {% archiveList headNews with type="list" flag="h" limit="3" order="id desc" %}
            {% for news in headNews %}
                <article>
                    <h3><a href="{{news.Link}}">{{news.Title}}</a></h3>
                    <p>{{news.Description|truncatechars:100}}</p> {# 截取前100个字符作为简介 #}
                    <span>{{stampToDate(news.CreatedTime, "2006-01-02")}}</span>
                </article>
            {% empty %}
                <p>当前没有头条新闻。</p>
            {% endfor %}
        {% endarchiveList %}
    </div>
</section>

这段代码会抓取最新的 3 篇标记为“头条”的文章,并以标题、简介和发布日期进行简洁展示。

场景二:网站顶部的“幻灯片”区域

轮播图是吸引用户眼球的常见方式,我们可以将标记为“幻灯”的文章作为轮播图的内容。在后台,确保这些文章都上传了精美的缩略图(通常是 Logo 字段或 Thumb 字段)。

”`twig

{% archiveList sliderItems with type="list" flag="f" limit="5" order="sort desc" %}
    {% for slide in sliderItems %}
        <div class="slide-item">
            <a href="{{slide.Link}}">
                <img src="{{slide.Logo}}" alt="{{slide.Title}}"> {# 使用Logo作为幻灯片大图 #}
                <div class="slide-caption">
                    <h3>{{slide.Title}}