`archiveFilters` tag supports dropdown menu or checkbox form of filtering interface?

AnQiCMS (AnQiCMS) provides a highly flexible solution in content management and display, especially in handling dynamic content filtering, itsarchiveFiltersThe label plays a core role. Regarding the question of whether the label supports a dropdown menu or checkbox-based filtering interface?archiveFiltersThis question can be understood as follows:archiveFiltersThe label itself does not directly generate visible UI elements, such as dropdown menus or checkboxes, but it provides all the data and logic support needed to build interactive filtering interfacesData and logic support.

archiveFiltersThe core positioning of the label

Firstly, we need to clarifyarchiveFiltersThe tag's role in the AnQiCMS template system. It is mainly used to dynamically generate content list page filtering conditions.Imagine a real estate website where users may need to filter listings based on conditions such as 'house type', 'price range', 'floor plan', etc.These filtering conditions are byarchiveFiltersThe label is responsible for providing data support.

The Anqi CMS can achieve such flexible filtering functions due to its powerful 'Content Model' and 'Custom Fields' features.In the AnQiCMS backend, you can customize various fields for different content models (such as articles, products, real estate, etc.).These custom fields can not only be simple text or numbers, but can also be defined as:

• Single choice: The user can only select one from the preset options.
• Multiple selections: The user can select multiple from the preset options.
• Drop-down selection: It is also a form of single-choice, usually presented as a dropdown menu.

After you have configured these types of custom fields in the content model,archiveFiltersTags can automatically identify them and provide the corresponding filtering data for the front-end template.

archiveFiltersHow the tag works

archiveFiltersWhen tags are used, they will output an array object (for example, you can name it)filtersThis array represents each element as a filterable parameter, containing information such as parameters'Name(parameter name),FieldNameThe parameter field name information. What's more important is that each parameter element also contains aItemsarray, which is the key to构成下拉菜单or复选框options.

ItemsEach sub-element in the array contains:

• Label: The display text of the filtered values, such as 'Residential', 'Commercial', 'One-bedroom apartment', etc.
• Link:This is the most critical part. It is a complete URL that includes the current filter condition and other selected filter conditions on the current page.When the user clicks on this link, the page will reload and display the content filtered under the condition.
• IsCurrentA boolean value indicating whether the current filter value has been selected, which is very useful for highlighting the current state in the UI.

Therefore,archiveFiltersTags provide a series of links with correct filtering logic (Link), and the display text corresponding to these links(Label）and the selected state（IsCurrent)

Build an interactive filtering interface: The responsibilities of the template

Now let's go back to the original question,archiveFiltersThe tag itself does not directly draw a dropdown menu or checkbox. The rendering work is entirely entrusted to the front-end template. Template developers need to utilizearchiveFiltersLabel outputLabel/LinkandIsCurrentData, combined with HTML, CSS, and JavaScript (if richer interaction is needed), to build a user-friendly filtering interface.

For example, if you want to implement a dropdown menu filter for a “house type”:

You can iterate over the templatearchiveFiltersThe “house type” parameter provided by theItemsarray. For each one of themitemYou can do thatLabelas<option>The text, do thatLinkAs a redirect URL (may need to capture through JavaScript)selectlabel'sonchangeEvent, then redirect to the correspondingLink)

{# 示例：构建一个下拉菜单筛选 #}
<select onchange="window.location.href=this.value;">
    <option value="">全部房屋类型</option>
    {% archiveFilters filters with moduleId="1" allText="全部" %}
        {% for filterGroup in filters %}
            {% if filterGroup.FieldName == "房屋类型" %}
                {% for option in filterGroup.Items %}
                    <option value="{{ option.Link }}" {% if option.IsCurrent %}selected{% endif %}>
                        {{ option.Label }}
                    </option>
                {% endfor %}
            {% endif %}
        {% endfor %}
    {% endarchiveFilters %}
</select>

If you want to implement a checkbox filter for 'Additional Facilities' (allowing multiple selections):

Similarly, you can iterate over the parameters of 'Additional Facilities':Itemsarray. For each one of themitem, you can create a<input type="checkbox">, and assign itLabelAs the text next to the checkbox. Click events can be handled by JavaScript: if the checkbox is selected, navigate toLinkIf unchecked, the current URL needs to be parsed, remove the filter parameter, and then navigate again.

{# 示例：构建复选框筛选 #}
<div>
    <span>附加设施：</span>
    {% archiveFilters filters with moduleId="1" allText="全部" %}
        {% for filterGroup in filters %}
            {% if filterGroup.FieldName == "附加设施" %}
                {% for checkbox in filterGroup.Items %}
                    <label>
                        <input type="checkbox"
                               value="{{ checkbox.Link }}"
                               {% if checkbox.IsCurrent %}checked{% endif %}
                               onclick="window.location.href=this.value;"> {# 简单示例，实际多选需要更复杂的JS逻辑处理URL组合 #}
                        {{ checkbox.Label }}
                    </label>
                {% endfor %}
            {% endif %}
        {% endfor %}
    {% endarchiveFilters %}
</div>

From the above examples, it is not difficult to see that the AnQi CMS.archiveFiltersThe label cleverly decouples the backend data logic from the frontend UI display.It provides a standardized, SEO-friendly data interface that allows template developers to freely render these data into any form of filtering interface, whether it be traditional dropdown menus, checkboxes, button groups, or even more complex interactive components.This separation not only enhances flexibility, but also ensures the consistency and maintainability of the filtering logic.

In summary,archiveFiltersTags are the cornerstone of Anqicms's powerful support in content filtering, providing structured filtering data (including complete links and selected status for each filtering option), allowing template developers to easily build filtering interfaces in the form of dropdown menus or checkboxes that meet various needs.

Frequently Asked Questions (FAQ)

Q1:archiveFiltersIs the filtering link generated by the tag SEO-friendly?A1: Yes,archiveFiltersTags provided to the templateLinkThe field is a meticulously constructed complete URL that includes filtering parameters.This means that the search engine crawler can normally crawl and index these filtered pages, thereby helping the website to gain a wider exposure on search engines.This direct URL structure is more SEO-friendly than those that rely solely on JavaScript dynamically loaded content.

Q2: Can I usearchiveFiltersOutput without writing JavaScript?A2: Yes. For simple single selection filtering, you can directly assignLinkAssign the value toselectlabel'sonchangeThe event performs a page jump. For multi-select checkboxes, if you want the page to refresh and apply the filter immediately with each selection, you can also bindLinkthe value to the checkbox'sonclickOn the event. However, in order to achieve a smoother user experience (for example, when the user clicks the "Apply" button to filter after selecting multiple checkboxes), or when more complex filtering condition combination logic is required, it is usually necessary to combine JavaScript for more refined control.

Q3: If my content model does not have a custom field set for the 'Single Choice' or 'Multiple Choice' types,archiveFilterswill the tags still work?A3:archiveFiltersThe label mainly depends on the custom fields configured in the content model (especially single/multiple/dropdown selection types) to generate filter data. If the content model does not have such fields available for filtering, or if these fields have not been set with optional values, thenarchiveFiltersThe label may not output any filter data or may only output a small amount of general information, making it impossible to build a meaningful filter interface on the front end. Therefore, it is necessary to fully utilizearchiveFiltersThe function, it is necessary to configure the custom fields and their options reasonably in the background content model.