如何在前端显示文章列表，并支持按内容模型、分类、推荐属性等多种条件筛选？

安企CMS为网站内容提供了极高的灵活性，无论是展示文章、产品还是其他自定义内容，都能轻松应对。当我们需要在网站前端显示一个内容列表，并且允许用户根据内容模型、分类、推荐属性等多种条件进行筛选时，安企CMS提供了非常直观且强大的模板标签来实现这些功能。

灵活定制内容的列表展示，不仅能提升用户体验，还能有效帮助访问者快速找到他们感兴趣的信息。在安企CMS中，实现这一目标的核心利器就是强大的archiveList标签，它配合一系列参数，可以帮助我们构建出各种复杂且实用的内容列表。

archiveList标签：内容列表的基石

archiveList标签是我们在前端调用文章、产品或其他文档列表的主要方式。它的基本用法是包裹在{% archiveList ... %}和{% endarchiveList %}之间，通过for循环遍历获取到的数据。例如，要显示最近发布的五篇文章，可以这样写：

{% archiveList archives with type="list" limit="5" %}
    {% for item in archives %}
        <div class="article-item">
            <a href="{{item.Link}}">
                <img src="{{item.Thumb}}" alt="{{item.Title}}" />
                <h3>{{item.Title}}</h3>
                <p>{{item.Description}}</p>
                <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量：{{item.Views}}</span>
            </a>
        </div>
    {% empty %}
        <p>目前还没有内容发布。</p>
    {% endfor %}
{% endarchiveList %}

这里，archives是我们自定义的变量名，用于存储获取到的内容列表。type="list"表示我们想要一个简单的列表，而不是分页列表，而limit="5"则限制了显示数量。

按内容模型筛选内容

安企CMS的“内容模型”功能让我们能根据业务需求自定义不同的内容结构，例如文章、产品、案例等。要在前端显示特定内容模型下的列表，可以使用moduleId参数。

假设“文章模型”的moduleId是1，“产品模型”的moduleId是2。如果我们只想显示“文章模型”下的内容：

{% archiveList articles with type="list" moduleId="1" limit="10" %}
    {# 循环并展示文章内容 #}
{% endarchiveList %}

如果想显示“产品模型”下的内容：

{% archiveList products with type="list" moduleId="2" limit="8" %}
    {# 循环并展示产品内容 #}
{% endarchiveList %}

通过后台的“内容管理”->“内容模型”页面，你可以查看或自定义每个内容模型的ID和名称。

按分类筛选内容列表

网站内容通常会被组织成不同的分类。categoryId参数允许我们指定显示某个或某几个分类下的内容。

例如，要显示ID为1的分类下的所有文章：

{% archiveList catArticles with type="page" categoryId="1" limit="10" %}
    {# 循环并展示该分类下的文章 #}
{% endarchiveList %}

如果想显示多个分类（比如ID为1和3）的内容，可以这样写：

{% archiveList multiCatArticles with type="page" categoryId="1,3" limit="10" %}
    {# 循环并展示多个分类下的文章 #}
{% endarchiveList %}

在一个分类列表页中，如果想自动获取当前分类下的文章，则可以省略categoryId参数，archiveList标签会自动识别当前页面的分类ID。如果你想获取所有顶级分类下的文章（不限具体分类），可以将categoryId设置为0。

按推荐属性筛选内容

安企CMS提供了“推荐属性”功能，允许我们给文章打上“头条[h]”、“推荐[c]”、“幻灯[f]”等标签。这些属性非常适合在首页或特定区域展示重要内容。flag参数就是用来筛选这些推荐内容的。

例如，要显示被标记为“推荐”的文章：

{% archiveList recommendedArticles with type="list" flag="c" limit="5" %}
    {# 循环并展示推荐文章 #}
{% endarchiveList %}

如果想显示“头条”内容，就将flag参数改为flag="h"。这些推荐属性可以在后台“内容管理”->“发布文档”页面进行设置。

关键词搜索与分页

用户在网站上进行搜索时，我们通常会将搜索关键词通过URL参数（例如?q=搜索词）传递。archiveList标签在type="page"模式下，会自动读取URL中的q参数作为搜索关键词。结合pagination标签，可以轻松实现带分页的搜索结果列表。

首先，在搜索页面（通常是search/index.html模板），你需要一个搜索表单：

<form method="get" action="/search">
    <input type="text" name="q" placeholder="请输入关键词" value="{{urlParams.q}}" />
    <button type="submit">搜索</button>
</form>

接着，在搜索结果区域使用archiveList和pagination：

{% archiveList searchResults with type="page" limit="10" %}
    {% for item in searchResults %}
        <div class="search-result-item">
            <a href="{{item.Link}}">
                <h3>{{item.Title}}</h3>
                <p>{{item.Description}}</p>
            </a>
        </div>
    {% empty %}
        <p>没有找到相关内容。</p>
    {% endfor %}
{% endarchiveList %}

<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 分页链接的渲染 #}
        {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
        {% for pageItem in pages.Pages %}
            <a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
        {% endfor %}
        {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
    {% endpagination %}
</div>

这里，urlParams.q会自动获取当前URL中的q参数值，用于显示搜索框中的默认关键词。

结合自定义字段进行高级筛选

安企CMS的“内容模型”不仅允许我们定义文章标题、内容等通用字段，还可以为每个模型添加独特的“自定义字段”。例如，为“产品模型”添加“颜色”、“尺寸”等字段。要在前端实现这些自定义字段的筛选，就需要用到archiveFilters标签和URL查询参数。

archiveFilters标签会根据你后台内容模型中配置的可筛选字段，自动生成筛选条件和对应的URL链接。

假设你在产品模型中定义了“颜色”和“尺寸”作为自定义字段：

{# 生成筛选条件 #}
<div>
    <h3>筛选条件：</h3>
    {% archiveFilters filters with moduleId="2" allText="不限" %}
        {% for filterItem in filters %}
            <p>{{filterItem.Name}}:</p>
            <ul>
                {% for option in filterItem.Items %}
                    <li class="{% if option.IsCurrent %}active{% endif %}">
                        <a href="{{option.Link}}">{{option.Label}}</a>
                    </li>
                {% endfor %}
            </ul>
        {% endfor %}
    {% endarchiveFilters %}
</div>

{# 根据筛选条件显示产品列表 #}
{% archiveList products with type="page" moduleId="2" limit="9" %}
    {% for item in products %}
        <div class="product-item">
            <h4>{{item.Title}}</h4>
            <p>颜色: {{item.color}}</p> {# 假设自定义字段名为color #}
            <p>尺寸: {{item.size}}</p> {# 假设自定义字段名为size #}
        </div>
    {% endfor %}
{% endarchiveList %}

<div class="pagination-area">
    {% pagination pages with show="5" %}{# ...分页代码... #}{% endpagination %}
</div>

在上面的例子中，archiveFilters会生成类似于/products?color=红色或/products?color=红色&size=L这样的筛选链接。archiveList标签在type="page"模式下，会智能地读取这些URL查询参数，并进行相应的筛选。自定义字段的值可以直接通过{{item.自定义字段名}}的方式