如何在AnQiCMS中配置文章的推荐属性(如头条、幻灯),并在前端不同区域显示?

在安企CMS中管理网站内容,并让重要信息在用户眼前一亮,是提升用户体验和内容营销效果的关键。其中,文章的推荐属性配置和前端展示,就是实现这一目标的重要功能。通过合理设置,你可以轻松地将“头条”、“幻灯”这类文章显示在网站的不同位置,吸引访客目光。

第一部分:在后台为文章设置推荐属性

首先,我们需要进入安企CMS的后台管理界面,为特定的文章赋予“推荐属性”。

你可以在左侧导航栏找到“内容管理”,然后选择“发布文档”或“文档管理”来编辑已有的文章。进入文章的编辑页面后,你会看到一系列设置选项。其中,有一个名为“推荐属性”的区域。

安企CMS提供了八种预设的推荐属性,每种属性都用一个字母代码标识,方便你在前端模板中精确调用:

  • 头条 [h]:通常用于网站最显眼的位置,如首页顶部的大标题文章。
  • 推荐 [c]:适用于常规推荐位,如侧边栏、文章列表中的推荐。
  • 幻灯 [f]:专为轮播图设计,适合在首页或特定页面以图片幻灯片形式展示。
  • 特荐 [a]:表示特别推荐,重要性可能介于头条和普通推荐之间。
  • 滚动 [s]:适用于新闻滚动条或公告栏,内容会以滚动形式展现。
  • 加粗 [b]:文章标题在列表中会以加粗样式显示,起到强调作用。
  • 图片 [p]:表示文章含有重要图片,可能需要特殊的图片展示样式。
  • 跳转 [j]:如果点击文章需要跳转到外部链接而非文章详情页,可以使用此属性。

在为文章设置推荐属性时,你可以根据文章的重要性及其适合的展示方式,选择一个或多个属性。例如,一篇非常重要的文章,你可能希望它既在首页以幻灯片形式展示,又在其他地方作为推荐文章出现,这时就可以同时勾选“幻灯 [f]”和“推荐 [c]”。选择完毕后,别忘了保存文章,这样推荐属性就生效了。

第二部分:在前端模板中调用并显示推荐文章

接下来,我们将了解如何在网站的前端模板中,根据这些推荐属性来调用和显示文章。安企CMS的模板标签系统让这一过程变得非常直观。我们主要会用到 archiveList 标签来获取文章列表,并通过 flag 参数指定要调用的推荐属性。

你需要编辑网站的模板文件,这些文件通常位于 /template 目录下你当前使用的主题文件夹中。如果你不确定如何编辑模板,可以先在后台的“模板设计”功能中尝试在线编辑,或者查阅“模板制作”相关的帮助文档。

这里有一些在不同前端区域显示推荐文章的常见场景和代码示例:

1. 在首页顶部展示“头条”文章

首页的头条区域通常只有一篇文章,要求最醒目。你可以这样来调用设置了“头条 [h]”属性的文章:

{# 假设这是你的首页模板文件,例如 index/index.html #}
<div class="main-headline">
    {% archiveList headlines with type="list" flag="h" limit="1" order="id desc" %}
        {% for item in headlines %}
        <a href="{{ item.Link }}" class="headline-link">
            <img src="{{ item.Logo }}" alt="{{ item.Title }}" class="headline-image">
            <h1 class="headline-title">{{ item.Title }}</h1>
            <p class="headline-description">{{ item.Description }}</p>
        </a>
        {% empty %}
        <p>暂无头条文章。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

这里,我们使用 flag="h" 来指定头条文章,limit="1" 限制只显示一篇,order="id desc" 则确保显示最新发布的头条文章。item.Logo 会自动获取文章的封面首图。

2. 在幻灯片区域显示“幻灯”文章

网站的轮播图区域常常需要多篇文章以图片加标题的形式循环展示。对于设置了“幻灯 [f]”属性的文章,你可以这样调用:

{# 幻灯片区域的HTML结构,通常会配合JavaScript轮播库使用 #}
<div class="carousel-container">
    <div class="swiper-wrapper">
        {% archiveList slides with type="list" flag="f" limit="5" order="sort desc" %}
            {% for item in slides %}
            <div class="swiper-slide">
                <a href="{{ item.Link }}">
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="slide-image">
                    <div class="slide-caption">
                        <h3>{{ item.Title }}</h3>
                    </div>
                </a>
            </div>
            {% empty %}
            <p>暂无幻灯片文章。</p>
            {% endfor %}
        {% endarchiveList %}
    </div>
    {# 其他轮播导航/分页器元素 #}
</div>

在这里,flag="f" 筛选出幻灯文章,limit="5" 获取最多五篇,order="sort desc" 则会按照你在后台设置的文章排序优先级来显示。item.Thumb 会自动获取文章的缩略图。

3. 在侧边栏显示“推荐”文章

侧边栏通常用于展示一些热门或精选文章。设置了“推荐 [c]”的文章是理想的选择:

{# 侧边栏推荐模块 #}
<div class="sidebar-module recommended-articles">
    <h2>推荐阅读</h2>
    <ul>
        {% archiveList recommended with type="list" flag="c" limit="10" order="views desc" %}
            {% for item in recommended %}
            <li>
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                <span>({{ item.Views }} 阅读)</span>
            </li>
            {% empty %}
            <li>暂无推荐文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

这里我们使用 flag="c" 来获取推荐文章,limit="10" 显示十篇,而 order="views desc" 使得浏览量最高的文章优先显示,非常适合“热门推荐”场景。

4. 在文章列表中对特定文章标题进行“加粗”显示

如果你希望在常规的文章列表中,某些重要文章的标题能够突出显示,可以利用“加粗 [b]”属性。不过需要注意的是,flag 参数在 archiveList 中每次只能指定一个属性。如果要在 同一个 列表中显示所有文章,并且让带有“加粗”属性的文章标题加粗,你不能直接在 archiveList 中用 flag="b" 来筛选(因为它只会显示加粗文章)。

更灵活的做法是,先获取文章列表,然后在循环中判断每篇文章是否带有“加粗”属性。这需要 showFlag=true 参数来让 item.Flag 字段可用:

{# 常规文章列表,同时加粗显示特殊文章 #}
<ul class="article-list">
    {% archiveList articles with type="page" limit="15" showFlag=true %}
        {% for item in articles %}
        <li>
            {# item.Flag 是一个字符串,包含所有设置的flag字母,例如 "hc" #}
            <a href="{{ item.Link }}" class="{% if item.Flag|contain:"b" %}font-bold{% endif %}">
                {{ item.Title }}
            </a>
            <span> - {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
        </li>
        {% empty %}
        <li>暂无文章。</li>
        {% endfor %}
    {% endarchiveList %}
</ul>

在这个例子中,showFlag=true 使得 item.Flag 字段包含文章的所有推荐属性(如 “hc”)。我们使用 contain 过滤器来判断 item.Flag 中是否包含字母 “b”,如果包含,则给链接添加 font-bold 类,实现加粗效果。

一些通用参数提示:

  • moduleId:如果你有多个内容模型(如文章、产品),