当网站内容日益丰富，用户往往希望能够更精准地找到他们感兴趣的信息，而不是在一堆无序的内容中大海捞针。对于运营者而言，提供灵活的文章列表筛选功能，不仅能显著提升用户体验，还能有效帮助用户发现更多关联内容，从而增加网站的停留时间和互动。

AnQiCMS 深知这一需求，通过其高度灵活的内容模型和强大的模板标签系统，让实现文章列表的参数筛选功能变得异常简单和直观。即使是自定义的属性，也能轻松融入筛选体系，为网站内容的管理和展示带来无限可能。

幕后准备：定义和管理你的自定义内容属性

要实现文章列表的参数筛选，我们首先需要为文章定义可供筛选的“属性”。在 AnQiCMS 中，这得益于其核心功能之一——灵活的内容模型。

想象一下，你正在运营一个房产信息网站，除了传统的文章标题、内容、发布时间，你可能还需要为每套房产（也就是每篇文章）添加“房屋类型”（如住宅、商铺、公寓）、“所在区域”、“户型”（如一室、两室、三室）等自定义属性。

在 AnQiCMS 的后台，你可以通过以下步骤轻松实现这些自定义属性的设置：

  1. 进入内容模型管理： 在后台导航中找到“内容管理”下的“内容模型”。AnQiCMS 默认提供了文章和产品模型，你也可以根据需要创建新的模型。
  2. 添加自定义字段： 选择你需要添加属性的模型（例如“文章模型”），点击编辑进入模型详情。在这里，你会看到“内容模型自定义字段”区域。点击“添加字段”，就可以定义新的属性了。
  3. 配置字段类型： 为你的自定义属性选择合适的字段类型。比如，“房屋类型”可以选择“单项选择”或“下拉选择”，并列出“住宅”、“商铺”、“公寓”等选项。而“面积”这样的属性则可以选择“数字”类型。值得注意的是，这里的“参数名”和“调用字段”对于后续在模板中的使用非常关键，建议使用易于理解的英文或拼音作为“调用字段”，因为它将作为模板中的变量名。
  4. 保存并应用： 完成自定义字段的添加后，保存内容模型。之后，当你发布或编辑该模型下的文章时，就能看到并填写这些新增的自定义属性了。

这些自定义属性，就是我们实现文章列表筛选的基石。它们让你的内容更加结构化，为用户提供更精细的查找维度。

前端呈现：在模板中巧妙运用筛选标签

在后台定义好自定义属性并为文章填充数据后，接下来就是在网站前端展示这些筛选选项，并让文章列表能够根据用户的选择动态变化。AnQiCMS 提供了两个强大的模板标签来完美配合这一需求：archiveFilters 和 archiveList。

archiveFilters 标签：生成筛选选项

archiveFilters 标签的职责是生成可供用户点击的筛选条件。它会根据你指定的内容模型，自动读取所有可用的自定义筛选字段及其对应的值，然后为每个值生成一个带有筛选参数的链接。

例如，要在你的房产网站文章列表页生成“房屋类型”和“户型”的筛选菜单，你可以在模板中这样使用 archiveFilters：

<div class="filter-area">
    {% archiveFilters filters with moduleId="你的文章模型ID" allText="不限" %}
        {% for item in filters %}
        <div class="filter-group">
            <span class="filter-label">{{item.Name}}: </span>
            <ul class="filter-options">
                {% for val in item.Items %}
                <li class="{% if val.IsCurrent %}active{% endif %}">
                    <a href="{{val.Link}}">{{val.Label}}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
    {% endfor %}
    {% endarchiveFilters %}
</div>

这里：

  • moduleId="你的文章模型ID" 告诉 AnQiCMS 你想为哪个内容模型生成筛选器（例如，文章模型通常是 1）。
  • allText="不限" 定义了“全部”选项的显示文本。
  • filters 变量会包含一个列表，其中每个 item 代表一个可筛选的自定义字段（如“房屋类型”），它的 Name 是字段的中文名，FieldName 是字段的英文标识。
  • 每个 item.Items 则是一个子列表，包含该字段的所有可选值（如“住宅”、“商铺”）。val.Label 是显示名称，val.Link 是点击后跳转的 URL，而 val.IsCurrent 则可以帮助你为当前选中的筛选条件添加 active 样式。

archiveList 标签：动态响应筛选结果

archiveList 标签用于在页面上展示文章列表。它的强大之处在于，当与 type="page" 参数结合使用时，它能智能地自动识别并响应 URL 中的筛选参数，从而动态地调整显示的文章内容。这意味着，你无需在 archiveList 标签中手动传递 archiveFilters 生成的筛选值，AnQiCMS 会自动完成匹配。

继续上面的房产网站例子，你的文章列表部分可以这样编写：

<div class="article-list">
    {% archiveList archives with moduleId="你的文章模型ID" type="page" limit="10" %}
        {% for item in archives %}
        <div class="article-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            {%- archiveParams params with id=item.Id %}
            {%- for param in params %}
                {%- if param.FieldName == "房屋类型" %} {# 假设你的自定义字段调用字段是"房屋类型" #}
                <span>房屋类型: {{param.Value}}</span>
                {%- endif %}
                {%- if param.FieldName == "面积" %} {# 假设你的自定义字段调用字段是"面积" #}
                <span>面积: {{param.Value}} 平方米</span>
                {%- endif %}
            {%- endfor %}
            {%- endarchiveParams %}
            <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        </div>
        {% empty %}
        <p>抱歉，没有找到符合条件的房产信息。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 分页功能同样无缝衔接 #}
    {% pagination pages with show="5" %}
        <div class="pagination-controls">
            <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
            {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>{% endif %}
            {% for page in pages.Pages %}<a class="{% if page.IsCurrent %}active{% endif %}" href="{{page.Link}}">{{page.Name}}</a>{% endfor %}
            {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>{% endif %}
            <a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        </div>
    {% endpagination %}
</div>

这里：

  • moduleId 确保我们获取的是正确内容模型的文章。
  • type="page" 开启了分页模式，同时也让 archiveList 能够监听 URL 中的筛选参数。
  • limit="10" 控制每页显示的文章数量。