如何利用AnQiCMS的推荐属性(flag)筛选并显示特定内容,如“头条”或“幻灯”?

AnQiCMS 提供了一套灵活的推荐属性(flag)机制,让网站运营者能够轻松地筛选并突出显示特定的内容,无论是网站首页的“头条新闻”、轮播图中的“幻灯片”,还是其他需要特别关注的“推荐”内容。这项功能大大提升了内容运营的效率和网站内容的丰富性。

认识推荐属性:给内容贴上“专属标签”

想象一下,你发布了许多精彩的文章和产品信息,但总有一些是当前最重要、最热门或者需要在特定位置展示的。安企CMS的推荐属性就是为此而生的一套“标签”系统。它允许你在常规的分类和标签之外,给内容额外打上一个或多个特殊的标记。

这些推荐属性在后台被称为“flag”,它们通过一个简单的字母来表示不同的推荐类型。目前,安企CMS支持以下几种常用推荐属性:

  • 头条 [h]: 通常用于展示最重要、最引人注目的新闻或文章。
  • 推荐 [c]: 表示该内容是编辑推荐的优质内容。
  • 幻灯 [f]: 专为网站首页或特定区域的轮播图(幻灯片)设计。
  • 特荐 [a]: 区别于普通推荐,用于特别推荐的内容。
  • 滚动 [s]: 适用于新闻滚动条、跑马灯等需要滚动展示的内容。
  • 加粗 [h]: 这是一个重复的标记,但语义上可能强调内容标题的视觉重要性。
  • 图片 [p]: 强调该内容含有高质量图片,可能用于图片专题或图集。
  • 跳转 [j]: 标识该内容点击后会直接跳转到外部链接或指定页面。

通过这些属性,我们可以精细化地控制内容在前端页面上的展现形式和优先级。

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

为内容设置推荐属性非常直观。当你在安企CMS后台编辑或发布一篇文档时,在“添加文档”或“编辑文档”界面,你会看到一个名为“推荐属性”的选项。

在这里,你可以根据内容的特点和运营需求,选择一个或多个推荐属性。例如,如果你想让一篇新发布的产品信息在首页的幻灯片区域展示,同时又希望它被标记为编辑“推荐”,那么你可以同时勾选 幻灯 [f]推荐 [c]

安企CMS的灵活性体现在,你可以为同一篇内容设置多个推荐属性,这意味着一篇内容可以同时是“头条”和“幻灯”,在不同的前端区域被调用展示。

在前端模板中筛选并显示特定内容

设置好推荐属性后,下一步就是在网站的前端模板中,根据这些属性来筛选并显示内容。这主要通过 archiveList 模板标签来实现。

archiveList 标签是安企CMS中用于获取文档列表的核心工具,它提供了丰富的参数来帮助我们精确控制内容的获取。其中,flag 参数就是用来指定我们要筛选的推荐属性。

需要注意的是,在单个 archiveList 标签调用中,flag 参数只能指定一个属性字母。这意味着,如果你想同时展示“头条”和“幻灯”的内容,你需要使用两个独立的 archiveList 标签。

下面,我们通过几个例子来看看具体如何操作:

示例一:在首页显示“头条新闻”

假设你希望在网站首页的显著位置显示5篇最新的“头条新闻”。

<div class="headline-news">
    <h2>头条新闻</h2>
    <ul>
        {% archiveList headlines with flag="h" limit="5" order="id desc" %}
            {% for item in headlines %}
                <li>
                    <a href="{{ item.Link }}">
                        <h3>{{ item.Title }}</h3>
                        <p>{{ item.Description | truncatechars:80 }}</p> {# 截取前80个字符作为简介 #}
                    </a>
                </li>
            {% empty %}
                <li>暂无头条新闻。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

在这个例子中:

  • flag="h" 告诉系统只获取被标记为“头条”的内容。
  • limit="5" 限制只显示最新的5篇文章。
  • order="id desc" 确保获取的是最新发布的(ID降序)。
  • item.Linkitem.Title 分别用于显示文章的链接和标题。
  • item.Description | truncatechars:80 则显示文章简介,并将其截取为80个字符。
  • {% empty %} 是一个非常实用的语法,当前端没有匹配内容时,会显示“暂无头条新闻。”。

示例二:制作首页的“幻灯片”轮播

接下来,如果我们需要在首页顶部展示3张幻灯片,这些幻灯片通常会包含图片和链接。

<div class="main-slider">
    <div class="swiper-wrapper">
        {% archiveList slides with flag="f" limit="3" order="id desc" %}
            {% for item in slides %}
                <div class="swiper-slide">
                    <a href="{{ item.Link }}">
                        {% if item.Thumb %}
                            <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                        {% else %}
                            <img src="/public/static/images/default-slide.jpg" alt="默认幻灯片"> {# 假设有个默认图 #}
                        {% endif %}
                        <div class="slide-caption">{{ item.Title }}</div>
                    </a>
                </div>
            {% empty %}
                <div class="swiper-slide">暂无幻灯片内容。</div>
            {% endfor %}
        {% endarchiveList %}
    </div>
    <!-- Add Pagination, if required -->
    <div class="swiper-pagination"></div>
</div>

这里:

  • flag="f" 明确指示我们只获取标记为“幻灯”的内容。
  • item.Thumb 用于显示内容设置的缩略图,这对于幻灯片通常是主要图片。item.Logo 也可以在某些情况下使用。
  • 我们还添加了一个判断,如果 item.Thumb 不存在,则显示一个默认图片,以确保页面美观。
  • 幻灯片的具体轮播效果通常需要配合前端JavaScript库(如Swiper.js)来实现,这里仅展示了内容的获取方式。

示例三:显示特定分类下的“推荐产品”

除了首页,我们也可以在特定分类页面下,显示该分类中被标记为“推荐”的产品。

{% categoryDetail currentCategory with name="Id" %} {# 获取当前分类ID #}
<div class="recommended-products">
    <h3>本分类推荐产品</h3>
    <div class="product-grid">
        {% archiveList recommendedProducts with moduleId="2" categoryId=currentCategory flag="c" limit="4" order="sort desc" %}
            {% for item in recommendedProducts %}
                <div class="product-item">
                    <a href="{{ item.Link }}">
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                        <h4>{{ item.Title }}</h4>
                        <p class="price">¥ {{ item.Price }}</p> {# 假设产品模型有Price字段 #}
                    </a>
                </div>
            {% empty %}
                <p>当前分类暂无推荐产品。</p>
            {% endfor %}
        {% endarchiveList %}
    </div>
</div>

在这个场景中:

  • 我们首先通过 {% categoryDetail currentCategory with name="Id" %} 获取了当前分类的ID。
  • moduleId="2" 确保我们只获取“产品模型”下的内容(假设产品模型ID为2)。
  • categoryId=currentCategory 将内容限制在当前分类下。
  • flag="c" 筛选出被标记为“推荐”的产品。
  • item.Price 展示了产品自定义字段中的价格,丰富了产品信息。

通过这些灵活的组合,安企CMS的推荐属性功能让内容呈现变得更为智能和个性化。它不仅提高了内容曝光度,也为用户提供了更加精准和有价值的信息。

常见问题解答 (FAQ)

1. 我可以给一个内容同时设置多个推荐属性吗? 是的,安企CMS允许你为同一篇文档勾选多个推荐属性。例如,你可以让一篇重要的文章同时具备“头条 [h]”和“幻灯 [f]”属性,这样它就可以在网站的不同区域以不同的形式被展示出来。

2. 我可以在一个 archiveList 标签中同时筛选出多种推荐属性的内容吗? 不可以。archiveList 标签的 flag 参数设计为一次只接受一个推荐属性的字母。如果你需要在一个页面上显示不同推荐属性的内容(例如,一个区域显示“头条”,另一个区域显示“推荐”),你需要使用多个 archiveList 标签,每个标签设置不同的 flag 值。

3. 如果我设置了推荐属性,但前端页面没有显示内容,可能是什么原因? 这可能有几个原因:

  • 内容未发布或已过期: 确保你设置了推荐属性的内容已经发布,并且发布时间在有效期内(如果没有设置定时发布的话)。
  • 模板代码错误: 检查你的模板代码,确保 archiveList 标签中的 flag 参数字母与你后台设置的属性字母完全一致,并且没有其他拼写错误。
  • 无匹配内容: 确保确实有内容被设置了相应的推荐属性。可以尝试在后台