When using the Anqi CMS to manage website content, efficiently displaying articles or product lists is the key to enhancing user experience and website functionality.AutoCMS provides flexible and powerful template tags, allowing us to precisely control the output of content based on various specified conditions.Whether it is to display the latest articles by category or to filter products based on specific attributes, AnQi CMS can help us easily achieve this.
Flexible control of content: document list tagsarchiveList
The core content display capability of Anqi CMS mainly througharchiveListTag implementation. This tag allows us to extract articles, products, or other types of content from the database and filter and sort them according to the conditions we set.
to usearchiveListLabel, the basic structure is like this:
{% archiveList archives with [参数列表] %}
{% for item in archives %}
<!-- 在这里显示每个文章或产品的详细信息 -->
<a href="{{ item.Link }}">{{ item.Title }}</a>
<!-- ...更多内容，如简介、图片等 -->
{% empty %}
<p>暂时没有符合条件的内容。</p>
{% endfor %}
{% endarchiveList %}
HerearchivesIt is the variable name we define for the list of content obtained, and you can name it according to your preference.itemIt represents each individual item within the list.
Let's delve deeper into the commonly used parameters; they are the key to controlling the display of the list:
Specify the content model (
moduleId)This is the most basic condition. Safe CMS supports various content models such as articles and products. If you want to display a list of articles, you usually specifymoduleId="1"(Article model ID); if it is a product list, it may bemoduleId="2". The specific ID can be viewed in the "Content Management" -> "Content Model" in the background. For example:moduleId="1".Filter by category (
categoryId)：We often need to display the content under a specific category. You can specify one or more category IDs (separated by commas), for examplecategoryIdparameter to specify one or more category IDs (separated by commas), for examplecategoryId="1,5,8".If you want to display the content of the current category page without manually specifying the ID, Anqi CMS will intelligently read the current category ID.categoryId="0"In addition,excludeCategoryIdThe parameter allows you to exclude certain category content.Control the number of displayed items and pagination (
limitandtype):limitThe parameter is used to control the number of items displayed at one time, for examplelimit="10"It will display the latest 10 items. It also supports offset mode, such aslimit="2,10"It means starting from the 2nd item and getting 10 items.typeThe parameter is very important, it determines the display mode of the list. Set it totype="list"to only showlimitthe specified amount of content; set it totype="page"to enable pagination for the content list, which requires coordination withpaginationLabels are used together; andtype="related"It is used to display recommended content related to the current article, usually on the article detail page.
Content sorting (
order)The display order of content is also important. You can choose different sorting methods as needed, such asorder="id desc"indicates sorting by ID in descending order (latest release),order="views desc"indicates descending order by views (most popular),order="sort desc"Then it is sorted in descending order by the custom sorting value of the background.Recommendation attribute filtering (
flag)：Security CMS allows setting various recommendation attributes for articles or products, such as "Headlines", "Recommended", "Slideshow", etc. You canflagParameters to filter content with specific attributes, such asflag="c"Only display content marked as "Recommended".excludeFlagParameters are used to exclude content with specific attributes.including subcategory content
child): By default,archiveListWill include content under subcategories (child=true）。If you only want to display the contents directly managed under the current category, not including the contents of its subcategories, you can set it tochild=false.Vague search（
q): whentype="page"when, you can useqParameters are searched by keywords, for exampleq="SEO优化". If the URL containsq=关键词Query parameters,archiveListit will automatically read and search.Custom field filteringThis is the strength of our CMS. If you have customized fields in the content model, such as adding 'Color' or 'Size' fields to the 'Product' model, and set these fields as filterable in the backend, then you can filter through the URL query parameters (such as
?color=红色&size=L）to dynamically filter content.
Dynamic interaction: document parameter filter tagsarchiveFilters
When we need to build a page that allows users to select conditions to filter content (such as house types, product colors, price ranges, etc.),archiveFiltersLabels come into play. They do not directly display content, but generate a series of clickable filter links that contain dynamically changing filter parameters.
archiveFiltersThe basic usage is as follows:
{% archiveFilters filters with moduleId="[模型ID]" allText="[全部文本]" %}
{% for item in filters %}
<div class="filter-group">
<span>{{ item.Name }}:</span>
<ul>
{% 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 %}
moduleId: Specify the content model for which you want to generate filter conditions.allText: Set the display text for the "All" or "Unlimited" option, if set tofalseit will not be displayed.
This tag will generate afiltersvariable that includes each filterable field (item.Name) and all its optional values (item.Items)。Each optional value has aLabel(display text),)Link(URL with filter parameters clicked) andIsCurrentEnglish. The page will refresh after the user clicks on these links.archiveListTags will display filtered content based on new parameters in the URL.
Pagination control:paginationtags
WhenarchiveListoftypeparameter settingspageautopaginationTags to generate pagination navigation.
{% pagination pages with show="5" %}
<ul class="pagination-list">
{% if pages.PrevPage %}<li class="prev"><a href="{{ pages.PrevPage.Link }}">上一页</a></li>{% endif %}
{% for item in pages.Pages %}<li class="{% if item.IsCurrent %}active{% endif %}"><a href="{{ item.Link }}">{{ item.Name }}</a></li>{% endfor %}
{% if pages.NextPage %}<li class="next"><a href="{{ pages.NextPage.Link }}">下一页</a></li>{% endif %}
</ul>
{% endpagination %}
showauto
auto
We need a product list page that can display all products, and allow users to filter by 'color' and 'material', as well as support pagination and sorting by the latest release.
Configure content model and filter fields in the background:
- Ensure there is a 'Product' content model
moduleIdAssume that2). - Add custom fields in the product model, such as
color(Color, type is single selection, optional values: Red, Blue, Green) andmaterial(Material, type is a single selection, optional values: metal, plastic, wood), and check the 'Filterable' option.
- Ensure there is a 'Product' content model
In the template file (for example)
product/list.html) Write code:{% extends "base.html" %} {% block content %} <div class="product-filters"> <h3>筛选产品</h3> {% archiveFilters filters with moduleId="2" allText="不限" %} {% for item in filters %} <div class="filter-group"> <span class="filter-name">{{ 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> <div class="product-list-container"> <h2>产品列表</h2> {% archiveList products with moduleId="2" type="page" order="id desc" limit="12" %} {% for item in products %} <div class="product-item"> <a href="{{ item.Link }}"> <img src="{{ item.Thumb }}" alt="{{ item.Title }}"> <h3>{{ item.Title }}</h3> <p>{{ item.Description }}</p> </a> </div> {% empty %} <p>没有找到符合条件的产品。</p> {% endfor %} {% endarchiveList %} <div class="pagination-area"> {% pagination pages with show="5" %} <ul class="pagination-list"> {% if pages.PrevPage %}<li class="prev"><a href="{{ pages.PrevPage.Link }}">上一页</a></li>{% endif %} {% for item in pages.Pages %}<li class="{% if item.IsCurrent %}active{% endif %}"><a href="{{ item.Link }}">{{ item.Name }}</a></li>{% endfor %} {% if pages.NextPage %}<li class="next"><a href="{{ pages.NextPage.Link }}">下一页</a></li>{% endif %} </ul> {% endpagination %} </div> </div> {% endblock %}
Common Questions and Answers (FAQ)
问：How can I display lists of different conditions (such as, latest articles, popular products, recommended activities) on the same page? Answer:You can use multiple on the page
archiveListLabel, each label sets different parameter conditions. For example, onearchiveListused to obtainmoduleId="1"andorder="id desc"list of articles, anotherarchiveListused to obtainmoduleId="2"andflag="c"list of products. Just specify different variable namesarchiveListfor each label (such asarticles,products,activitiesThey can be displayed on the same page without interfering with each other.Question: I have set up
archiveListcondition, but no content is displayed on the page, what could be the reason? Answer:First, please checkmoduleId