推荐属性(如头条、幻灯)如何控制内容在首页或其他区块的特殊显示?

在网站运营中,我们经常需要让某些重要的内容在首页或特定区域脱颖而出,吸引访问者的注意力,例如最新的头条新闻、精美的产品幻灯片或是紧急的通知公告。AnQiCMS 提供了一套非常直观且高效的机制来处理这一需求,那就是“推荐属性”。

推荐属性是什么?

在 AnQiCMS 中,推荐属性就像内容的“标签”,你可以为文章、产品、活动等内容打上特定的标记,告诉系统它们应该被区别对待,在网站的不同位置以特殊方式显示。这些属性是预设好的,旨在满足常见的网站内容展示需求。

AnQiCMS 内置了多种推荐属性,每种属性都对应一个简短的字母代码,方便在模板中调用:

  • 头条 [h]:通常用于网站最重要、最显眼的位置,如首页的大幅新闻。
  • 推荐 [c]:表示内容具有较高的推荐价值,适合在侧边栏、相关内容区展示。
  • 幻灯 [f]:常用于需要以轮播图形式展示的内容,例如首页顶部的大图滚动。
  • 特荐 [a]:特指特别推荐的内容,可能比普通推荐更重要。
  • 滚动 [s]:适用于需要以跑马灯或滚动列表形式展示的短消息或通知。
  • 加粗 [h]:在某些设计中,可能用于在列表中将标题以粗体显示,以示突出。
  • 图片 [p]:确保该内容在列表展示时一定会带有一张缩略图,即便内容中没有图片,系统也会尝试使用默认图。
  • 跳转 [j]:将内容的链接设置为外部链接,点击后会跳转到其他网站或页面。

如何在后台为内容设置推荐属性?

设置这些推荐属性非常简单。当你进入 AnQiCMS 后台,在发布或编辑任何文档(如文章、产品)的界面时,你会看到一个名为“推荐属性”的区域。这个区域通常以多选框的形式呈现,列出了所有可用的属性及其对应的功能。

你可以根据内容的特性和展示优先级,勾选一个或多个属性。比如,一篇特别重要的新闻,你可能会勾选“头条[h]”;如果它同时需要出现在首页的轮播图中,你还可以勾选“幻灯[f]”。如果你只想让某篇文章在列表显示时强制带图,即便内容中无图,也可以勾选“图片[p]”。这些属性可以自由组合,当然,你也可以选择不设置任何属性,让内容按普通方式显示。

如何在前端模板中调用并显示这些特殊内容?

光设置了属性还不够,我们还需要告诉网站的模板如何根据这些属性来获取并展示内容。在 AnQiCMS 的模板中,核心的工具是 archiveList 标签,它负责从数据库中获取内容列表。要利用推荐属性来筛选内容,我们需要在 archiveList 标签中使用 flag 参数。

例如,如果你想在首页的某个“头条新闻”区域显示所有被标记为“头条[h]”的文章,你可以这样在模板中编写代码:

{# 首页头条区展示 #}
<div class="headlines-section">
    <h2>头条新闻</h2>
    {% archiveList topHeadlines with type="list" flag="h" limit="5" %}
    {% for item in topHeadlines %}
    <div class="headline-item">
        <a href="{{ item.Link }}">
            <h3>{{ item.Title }}</h3>
            <p>{{ item.Description|truncatechars:100 }}</p>
        </a>
    </div>
    {% endfor %}
    {% endarchiveList %}
</div>

这里的 flag="h" 就是告诉系统,只获取那些带有“头条”属性的内容,并且 limit="5" 限制了只显示最新的5条。

再比如,如果你的网站首页有一个图片幻灯片区域,需要展示被标记为“幻灯[f]”的文章:

{# 幻灯片/轮播图区展示 #}
<div class="carousel-section">
    <div id="homepage-carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            {% archiveList slideshowItems with type="list" flag="f" limit="3" %}
            {% for item in slideshowItems %}
            <div class="carousel-item {% if forloop.Counter == 1 %}active{% endif %}">
                <img src="{{ item.Logo }}" alt="{{ item.Title }}">
                <div class="carousel-caption">
                    <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
                    <p>{{ item.Description|truncatechars:150 }}</p>
                </div>
            </div>
            {% endfor %}
            {% endarchiveList %}
        </div>
        {# 这里可以添加轮播控制按钮和指示器 #}
    </div>
</div>

需要注意的是,flag 参数一次只能指定一个属性。如果你需要同时获取带有多个属性的内容,需要多次调用 archiveList 标签,或者在前端通过其他逻辑进行组合。

关于纯图片幻灯片的补充:

如果你只是需要一个纯粹的图片轮播展示,而不是与具体文章内容关联,AnQiCMS 也提供了 bannerList 标签。你可以在后台的“网站导航”或“页面资源”等相关设置中上传并管理图片分组,然后在模板中通过 bannerList 标签并指定分组名称来调用,例如:

{# 纯图片Banner幻灯片展示,假设后台设置了“首页幻灯”分组 #}
<div class="banner-carousel">
    {% bannerList banners with type="首页幻灯" %}
    {% for item in banners %}
    <a href="{{ item.Link }}" target="_blank">
        <img src="{{ item.Logo }}" alt="{{ item.Alt }}">
    </a>
    {% endfor %}
    {% endbannerList %}
</div>

这两种方式各有侧重,archiveList 结合 flag 适用于展示带有文章内容的推荐,而 bannerList 更适用于纯粹的视觉元素推广。

灵活运用与**实践

这些推荐