安企CMS的“推荐属性”标签如何在前端实现内容的高亮显示？

安企CMS提供了一套强大的内容管理功能，其中“推荐属性”标签是内容运营中一项非常实用的工具。它能帮助我们有效地组织和突出网站上的重要内容，无论是为了提升用户体验，还是为了更好地进行SEO优化，这些属性都能发挥关键作用。

理解“推荐属性”：内容运营的利器

在安企CMS中，“推荐属性”是为每篇文档（如文章、产品等）设定的特殊标识。它们允许我们将某些内容标记为“头条”、“推荐”或“幻灯”等，从而在前端页面上以不同的方式展示，吸引用户的注意力。这些属性不仅便于后台管理，也为前端开发者提供了极大的灵活性，能够根据不同的运营策略，灵活地在网站的不同区域高亮显示内容。

安企CMS提供了多种预设的推荐属性，每个属性都有一个对应的字母代码，方便在模板中进行调用：

• 头条 [h]: 通常用于网站最重要、最受关注的内容，常在首页顶部或显眼位置展示。
• 推荐 [c]: 泛指编辑或系统推荐的内容，可在各类列表页、侧边栏等处展示。
• 幻灯 [f]: 专为轮播图设计，适合在首页或其他区域以大图或幻灯片形式展示。
• 特荐 [a]: 特别推荐的内容，可能具有更高优先级或特殊意义。
• 滚动 [s]: 适合在公告栏、新闻滚动条等区域展示的动态内容。
• 加粗 [h]: (注意：与“头条”属性代码重合，通常在实际使用中会以“头条”为主，或者前端根据后台设置的其他字段进行额外加粗样式处理)
• 图片 [p]: 标记为含有重要图片的文章，便于在图片展示模块中调用。
• 跳转 [j]: 标记为需要跳转到外部链接的内容。

需要注意的是，在同一个内容列表标签中，如果我们使用 flag 参数来筛选内容，通常只能指定一个属性来过滤。这意味着您不能同时筛选“头条”和“推荐”的内容，而需要分别调用。

后端设置：为内容打上“高亮”标签

在安企CMS的后台管理界面，为文档设置“推荐属性”非常直观。当您在“内容管理”模块下添加或编辑任何一篇文档时，都会看到一个名为“推荐属性”的区域。

在这里，系统会以多选框的形式列出所有可用的推荐属性。您可以根据内容的性质和运营需求，选择一个或多个属性。例如，如果一篇新闻稿既要作为头条新闻展示，又要出现在首页轮播图中，您可以同时勾选“头条 [h]”和“幻灯 [f]”。一旦设置并保存，这些属性就会与文档关联起来，为前端的灵活调用做好准备。

前端实现：让“推荐属性”在网站上闪耀

安企CMS采用类似Django的模板引擎语法，这意味着我们可以使用 {% 标签 %} 进行逻辑控制，使用 {{ 变量 }} 输出内容。理解这一基本原则是实现前端高亮显示的关键。

在前端模板中，我们主要通过 archiveList 和 archiveDetail 这两个标签来操作“推荐属性”。

1. 筛选并展示特定推荐内容列表

最常见的需求是根据推荐属性来筛选并显示内容。例如，您可能希望在首页顶部展示最新的“头条”内容，或者在侧边栏显示“推荐”文章。这时，可以在 archiveList 标签中使用 flag 参数。

假设您想获取5篇被标记为“推荐 [c]”的文章：

{# 筛选并展示5篇被标记为“推荐”的文章 #}
<div class="recommended-articles">
    <h2>编辑推荐</h2>
    {% archiveList recommendedArticles with moduleId="1" flag="c" limit="5" %}
        {% for article in recommendedArticles %}
            <div class="article-item">
                <a href="{{ article.Link }}">{{ article.Title }}</a>
                <p>{{ article.Description }}</p>
            </div>
        {% empty %}
            <p>暂无推荐文章。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

类似地，如果您需要显示幻灯片区域的内容，可以使用 flag="f"：

{# 筛选并展示幻灯片内容 #}
<div class="homepage-slider">
    {% archiveList sliderItems with moduleId="1" flag="f" limit="3" %}
        {% for item in sliderItems %}
            <div class="slide">
                <a href="{{ item.Link }}">
                    <img src="{{ item.Logo }}" alt="{{ item.Title }}">
                    <h3>{{ item.Title }}</h3>
                </a>
            </div>
        {% empty %}
            <p>暂无幻灯片内容。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

通过修改 flag 参数的值，您可以轻松地在网站的各个部分调取并展示不同类型的推荐内容。

2. 在内容列表中动态显示“推荐属性”标识

有时，我们不希望单独筛选列表，而是在一个普通的文章列表中，根据每篇文章的“推荐属性”动态地添加一些高亮标识，比如一个小图标或一个文字标签。为了实现这一点，您需要在 archiveList 标签中添加 showFlag=true 参数，这样 item.Flag 字段才能在循环中被访问到。

item.Flag 返回的是一个字符串，如果一篇文章同时设置了多个推荐属性（例如“头条”和“推荐”），item.Flag 的值可能是 "hc"。我们可以利用安企CMS的 contain