The AnQiCMS provides a highly flexible solution for content management and display, especially in handling dynamic content filtering.archiveFiltersTags play a core role. For the question:archiveFiltersDoes the tag support a dropdown menu or checkbox-based filter interface?archiveFiltersThe tag itself does not directly generate visible UI elements, such as dropdown menus or checkboxes, but it provides all the data and logic support required to build these interactive filtering interfacesData and logic support.
archiveFiltersThe core positioning of the label.
Firstly, we need to be cleararchiveFiltersThe role of tags in the AnQiCMS template system.It is mainly used to dynamically generate content list page filtering conditions.Imagine a real estate website where users might need to filter listings based on conditions such as 'property type', 'price range', 'layout', etc.archiveFiltersThe label is responsible for providing data support.
The flexible filtering function of AnQi CMS is realized thanks to its powerful 'content model' and 'custom field' features.In AnQiCMS backend, you can customize various fields for different content models (such as articles, products, housing resources, etc.).
- Single selection: The user can only select one from the preset options.
- Multiple selection: The user can select multiple from the preset options.
- Drop-down selectionIt 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 tags work
archiveFiltersTags are used to output an array object (for example, you can name itfiltersThis array contains each element representing a filterable parameter, which includes information such as the parameter'sName(Parameter name)、FieldName(Parameter field name) information. What's more important is that each parameter element also contains anItemsarray, which is the key to构成下拉菜单或复选框选项。
ItemsThe each sub-element in the array includes:
Label:The display text of the filtered value, such as “Residential”, “Shop”, “One bedroom one living room”, etc.Link:This is the most core 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 this link, the page will reload and display the content filtered by this condition.IsCurrentAn English translation of 'auto' is 'English'. A boolean value indicating whether the current filter value has been selected, which is very useful for highlighting the current state in UI.
Therefore,archiveFiltersThe links provided by the tag are a series of links with correct filtering logic (Link），and these links corresponding to the display text（Label）and the selected state（IsCurrent).
Build an interactive filtering interface: the responsibility of the template
Now back to the original question,archiveFiltersThe label itself does not directly draw a dropdown menu or checkbox. This rendering work is completely handed over to the front-end template. Template developers need to utilizearchiveFilterstag 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 the 'House Type':
You can iterate overarchiveFiltersthe 'House Type' parameter provided byItemsthe array. For everyitemEnglish, you can set itLabelas<option>text, set itLinkas a jump URL (it may need to be captured through JavaScript)selectTagsonchangeevent, 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 the checkbox filtering for 'Additional Facilities' (allowing multiple selections):
Similarly, you can iterate over the 'Additional Facilities' parameters:Itemsthe array. For everyitemYou can create a<input type="checkbox">and then assign it toLabelAs the text next to the checkbox. Click events can be handled by JavaScript: if the checkbox is selected, then navigate toLinkIf unchecked, the current URL needs to be parsed, the filtering parameter removed, and then navigated again in English.
{# 示例：构建复选框筛选 #}
<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>
It can be easily seen from the above examples that the security CMS ofarchiveFiltersLabel cleverly decouples backend data logic and frontend UI display.It provides a standardized, SEO-friendly data interface, allowing template developers to freely render these data into any form of filter interface according to design requirements, whether it is a traditional dropdown menu, checkbox, button group, or even more complex interactive components.This separation not only enhances flexibility, but also ensures the consistency and maintainability of the filtering logic.
In short,archiveFiltersThe tag is the cornerstone that provides strong support in content filtering for AnQi CMS, it allows template developers to easily build filtering interfaces in the form of dropdown menus or checkboxes to meet various needs by providing structured filtering data (including complete links and selected status for each filtering option).
Common Questions (FAQ)
Q1:archiveFiltersIs the filter link generated by tags SEO-friendly?A1: Yes,archiveFiltersTags provided to the templateLinkThe field is a carefully constructed complete URL that includes filtering parameters.This means that search engine crawlers can normally crawl and index these filtered pages, thus helping the website gain broader exposure in search engines.This direct URL structure is more SEO-friendly than those that rely solely on JavaScript dynamically loaded content.
Q2: Can I use it directly?archiveFiltersOutput without writing JavaScript?A2: Can. For simple single-choice filtering, you can directly assignLinkthe value toselectTagsonchangeThe event performs a page jump. For multi-select checkboxes, if you want the page to refresh and apply the filter immediately each time you make a selection, you can also bind the value to the checkbox.Linkto the checkbox.onclickEvent on.However, in order to achieve a smoother user experience (for example, after the user selects multiple checkboxes and then clicks the "Apply" button to filter), or when more complex combination logic for filtering conditions is required, it is usually necessary to combine JavaScript for more fine-grained control.
Q3: If my content model does not set a custom field of the type "Single choice" or "Multiple choice",archiveFilterswill the tags still be effective?A3:archiveFiltersThe label mainly relies on the custom fields configured in the content model (especially single/multiple/dropdown selection types) to generate filter data. If there are no such filterable fields in the content model, or if these fields have not been set with optional values,archiveFiltersThe label may not output any filtered data or only output a small amount of general information, making it impossible to construct a meaningful filtering interface on the front-end. Therefore, to fully utilizearchiveFiltersThe role of the content model in the background must be properly configured with custom fields and their optional values.