在运营网站内容时，我们经常需要对某些文章或产品进行特别推荐，比如“头条”、“热门”或“推荐”等，以便在页面上更醒目地展示它们，引导用户关注。AnQiCMS 提供了一套非常灵活的“推荐属性”功能，让你可以轻松实现这一点。接下来，我们一起看看如何在AnQiCMS中设置这些属性，并把它们动态地显示在你的网站页面上。

核心概念：理解“推荐属性”及其应用

AnQiCMS 中的“推荐属性”是一种标记内容重要性或分类用途的方式。当你发布或编辑文章、产品时，可以在后台找到“推荐属性”选项。系统内置了多种常用的属性，每种属性都对应一个简短的字母代号，方便你在模板中进行调用：

  • 头条 [h]：通常用于网站首页最重要、最显眼的位置。
  • 推荐 [c]：泛指被推荐的内容，可以在各种列表或侧边栏中显示。
  • 幻灯 [f]：常用于轮播图或幻灯片区域的内容。
  • 特荐 [a]：特别推荐的内容。
  • 滚动 [s]：可能用于滚动新闻或公告。
  • 加粗 [h]：文档中提到，这个属性代号和头条重复了，使用时需要留意实际效果。
  • 图片 [p]：表示内容带有图片，方便筛选纯图片类内容。
  • 跳转 [j]：表示点击后会跳转到外部链接的内容。

这些属性并非互斥，你可以为同一篇文章或产品勾选多个推荐属性。例如，一篇文章可以同时是“头条”和“推荐”。

在后台设置这些属性非常直观。当你进入“内容管理”模块，无论是“添加文档”还是“编辑文档”，在编辑界面的右侧都会看到“推荐属性”这个选项，你只需勾选相应的属性即可。

前端展示：如何在页面中动态调用

理解了“推荐属性”的设置，下一步就是如何在网站页面上动态地展示这些内容。AnQiCMS 强大的模板标签系统让这一过程变得简单。

情景一：在列表页筛选显示特定推荐属性的内容

你可能希望在网站首页有一个区域专门展示“头条”文章，或者在产品列表页的顶部推荐几款“热销”产品。这时，archiveList 标签就能派上用场。它有一个 flag 参数，允许你根据推荐属性来过滤内容。

例如，要在网站的某个区域显示5篇“头条”文章，你可以这样编写模板代码：

<section class="headline-articles">
    <h2>最新头条</h2>
    <ul>
        {% archiveList headlines with moduleId="1" flag="h" limit="5" %}
            {% for article in headlines %}
                <li>
                    <a href="{{ article.Link }}">{{ article.Title }}</a>
                    <span>发布日期：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
                </li>
            {% empty %}
                <li>暂无头条文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</section>

在这个例子中：

  • moduleId="1" 表示我们调用的是文章模型的内容（通常文章模型的ID是1，具体请查看后台内容模型设置）。
  • flag="h" 明确指定只获取被标记为“头条”的内容。
  • limit="5" 则限制只显示最新的5篇符合条件的内容。

需要特别注意的是，archiveList 标签的 flag 参数一次只能指定一个属性代号。 这意味着你不能直接通过 flag="h,c" 来同时获取“头条”和“推荐”的内容。如果你需要展示多种推荐属性的内容，可能需要使用多个 archiveList 标签块，或者在获取所有内容后，在循环内部通过判断来显示。

情景二：在内容详情页或列表项旁展示内容的推荐属性标记

除了筛选显示，你可能还希望在文章或产品的标题旁边，或者在列表项的某个位置，直接显示它具有的推荐属性。比如，在文章标题旁加上一个“头条”或“推荐”的角标。

当你使用 archiveList 标签循环出内容时，每个 item 对象都会包含一个 Flag 字段，其中存储了该内容所有的推荐属性代号，例如 "h,c"。你可以在模板中通过 contain 过滤器来判断 Flag 字段是否包含某个特定的属性代号。

以下是一个在文章标题旁显示推荐属性标记的示例：

<article class="article-detail">
    <h1 class="article-title">
        {{ archive.Title }}
        {% if archive.Flag|contain:"h" %} <span class="flag-headline">头条</span> {% endif %}
        {% if archive.Flag|contain:"c" %} <span class="flag-recommend">推荐</span> {% endif %}
        {% if archive.Flag|contain:"f" %} <span class="flag-carousel">幻灯</span> {% endif %}
    </h1>
    <div class="article-meta">
        <span>分类：<a href="{{ archive.Category.Link }}">{{ archive.Category.Title }}</a></span>
        <span>发布日期：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
        <span>阅读量：{{ archive.Views }}</span>
    </div>
    <div class="article-content">
        {{ archive.Content|safe }}
    </div>
</article>

在这个例子中：

  • 我们直接使用了 archive.Title 获取当前文档的标题。
  • {% if archive.Flag|contain:"h" %} 这行代码判断当前文档的 Flag 属性中是否包含 h（头条）这个代号。如果包含，就显示一个 <span> 标签，内容为“头条”。
  • 你可以根据需要，为不同的属性代号添加不同的样式类（如 flag-headline, flag-recommend），并通过 CSS 来美化它们的显示效果，比如设置背景色、字体样式等，让它们看起来像一个醒目的标签。

如果你是在一个 archiveList 循环内部，代码会非常类似，只需将 archive 替换为循环变量（例如 item）即可：

”`twig {% archiveList articles with moduleId=“1” limit=“10” showFlag=true %} {# 注意这里添加了 showFlag=true 参数 #}

{% for item in articles %}
    <div class="article-item">
        <h3>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            {% if item.Flag|contain:"h" %} <span class="flag-headline">头条</span> {% endif %}
            {% if item.Flag|contain:"c" %} <span class="flag-recommend">推荐</span> {% endif %}
        </h3>
        <p>{{ item.Description }}</p>
    </div>
{%