在安企CMS中,为了让您的网站内容更具吸引力,并且能够灵活地展示不同重要级别或展示形式的文章,系统提供了“推荐属性”功能。通过巧妙运用这些属性,您可以轻松地在文章列表或详情页上,为内容打上“头条”、“推荐”、“幻灯”等标签,从而引导用户关注,提升内容营销效果。

这篇指南将带您深入了解如何在AnQiCMS中设置和运用这些推荐属性,让您的网站内容管理更加得心应手。

一、理解推荐属性及其作用

首先,我们来认识一下这些推荐属性。在AnQiCMS的后台,当您添加或编辑文档时,会看到一个“推荐属性”的选项。这里列出了多种属性供您选择,例如:

  • 头条 [h]: 通常用于网站首页最重要、最受关注的新闻或文章,吸引用户第一眼注意。
  • 推荐 [c]: 标记为高质量、值得阅读的内容,常在侧边栏、相关推荐区域出现。
  • 幻灯 [f]: 专为轮播图设计,带有此属性的文章通常会提取封面图,在大尺寸的图片展示区域循环播放。
  • 特荐 [a]: 比“推荐”更进一步,通常是编辑精心挑选的深度内容。
  • 滚动 [s]: 适用于通知、公告等需要在特定区域滚动展示的信息。
  • 图片 [p]: 强调内容以图片为主,或者列表展示时需要特别突出图片。
  • 跳转 [j]: 当点击文章时,不进入文章详情页,而是直接跳转到预设的外部链接,非常适合广告或引用外部资源。

这些属性的本质,是为您的内容打上不同类型的“标签”,方便您在前端页面根据需求进行筛选和展示。一个内容可以同时拥有多个推荐属性,例如,一篇新闻既可以是“头条”,也可以同时是“幻灯”,这意味着它既能在头条区域显示,也能作为轮播图的一部分。

二、在后台设置内容的推荐属性

设置推荐属性非常直观。当您登录AnQiCMS后台,进入“内容管理”模块,选择“添加文档”或编辑现有文档时,会看到“推荐属性”一栏。

您只需勾选相应的属性即可。例如,如果您希望一篇新发布的文章成为网站首页的头条新闻,同时也在轮播图中展示,那么您可以同时勾选“头条[h]”和“幻灯[f]”。系统会在您保存文章后,自动为这篇内容打上这些标记。

三、在文章列表页展示和筛选推荐属性内容

在网站的前端,文章列表页是展示内容的重要窗口。AnQiCMS提供了灵活的模板标签archiveList,让您可以根据推荐属性来筛选和显示内容。

1. 筛选指定推荐属性的列表

假设您想在首页的一个区域专门展示“头条”文章,或者在侧边栏显示“推荐”内容,您可以这样做:

{# 假设您想获取5篇头条文章 #}
<div class="headline-articles">
    <h2>头条新闻</h2>
    <ul>
        {% archiveList archives with type="list" flag="h" limit="5" %}
            {% for item in archives %}
                <li>
                    <a href="{{item.Link}}">{{item.Title}}</a>
                    {# 这里可以根据需要添加发布时间、简介等信息 #}
                    <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                </li>
            {% empty %}
                <li>目前没有头条文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

{# 假设您想在侧边栏展示3篇推荐文章 #}
<div class="recommended-articles">
    <h3>推荐阅读</h3>
    <ul>
        {% archiveList recommendations with type="list" flag="c" limit="3" %}
            {% for item in recommendations %}
                <li><a href="{{item.Link}}">{{item.Title}}</a></li>
            {% empty %}
                <li>暂无推荐文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

在上面的代码中,flag="h"用于筛选带有“头条”属性的文章,而flag="c"则用于筛选带有“推荐”属性的文章。您只需将flag参数的值替换成对应的属性字母(如f代表幻灯,j代表跳转等),即可获取不同属性的文章列表。

2. 在列表项中直观显示推荐属性标记

除了筛选,您可能还希望在普通文章列表中,为带有特定推荐属性的文章添加一个醒目的小图标或文字标记,让用户一眼识别。这时候,我们需要在archiveList循环内部,利用item.Flag字段来判断。

item.Flag会返回一个字符串,包含了文章设置的所有推荐属性字母。我们可以使用contain过滤器来检查它是否包含特定的属性字母。

<div class="all-articles-with-badges">
    <h2>全部文章</h2>
    <ul>
        {% archiveList articles with type="list" limit="10" showFlag=true %}
            {% for item in articles %}
                <li>
                    <a href="{{item.Link}}">
                        {% if item.Flag|contain:"h" %}
                            <span class="badge headline-badge">头条</span>
                        {% elif item.Flag|contain:"c" %}
                            <span class="badge recommended-badge">推荐</span>
                        {% elif item.Flag|contain:"f" %}
                            <span class="badge slideshow-badge">幻灯</span>
                        {% endif %}
                        {{item.Title}}
                    </a>
                </li>
            {% empty %}
                <li>暂无文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

请注意,为了在列表项中获取 item.Flag,您需要在 archiveList 标签中添加 showFlag=true 参数。

通过这种方式,文章列表中的每个项目会根据其推荐属性,动态显示对应的标记,极大地提升了内容的可读性和视觉吸引力。当然,您还需要一些CSS样式来美化这些badge

四、在文章详情页显示推荐属性标记

在文章详情页,您也可以根据当前文章的推荐属性,显示相应的标记或信息。这与列表页的逻辑类似,只是我们直接使用archive对象(代表当前文章)的Flag字段。

<article class="article-detail">
    <h1>{{archive.Title}}</h1>
    <div class="article-meta">
        发布时间:{{stampToDate(archive.CreatedTime, "2006年01月02日")}}
        {% if archive.Flag|contain:"h" %}
            <span class="badge detail-headline">头条新闻</span>
        {% endif %}
        {% if archive.Flag|contain:"c" %}
            <span class="badge detail-recommended">小编推荐</span>
        {% endif %}
        {% if archive.Flag|contain:"j" %}
            <span class="badge detail-jump">(点击此文将跳转到外部链接)</span>
        {% endif %}
        {# 您可以在这里继续添加其他属性的判断 #}
    </div>
    <div class="article-content">
        {{archive.Content|safe}}
    </div>
</article>

这里,我们通过{{archive.Flag|contain:"h"}}来判断当前文章是否含有“头条”属性,并相应地展示“头条新闻”标记。这样,即便是进入了详情页,用户也能清晰地知道这篇内容的重要程度或特殊性。

五、实用