在安企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:如果你有多个内容模型(如文章、产品),