When using AnQi CMS to manage website content, efficiently displaying articles or product lists is the key to enhancing user experience and website functionality.AnQi CMS 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 by specific attributes, Anqi CMS can help us easily achieve it.
Flexible control of content: document list tagsarchiveList
The core content display capability of Anqi CMS mainly involvesarchiveListThe tag allows us to retrieve articles, products, or other types of content from the database and to filter and sort 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, you can name it according to your preference.itemrepresents each individual item in the list.
Let's delve deeper into the commonly used parameters, which are the keys to controlling the display of the list:
Specify content model (
moduleId)This is the most basic condition. Anqi 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); it may be for a product listmoduleId="2"The specific ID can be viewed in the background under "Content Management" -> "Content Model". For example:moduleId="1".Filter by category (
categoryId)：We often need to display the content of a specific category. You can specify one or more category IDs using a comma, for examplecategoryIdParameter specifies one or more category IDs (separated by commas), for examplecategoryId="1,5,8"If you want to display the content of the current page category without manually specifying the ID, Anqi CMS will intelligently read the current category ID.If you want to get all the content or do not want it to automatically read the current category ID, you can explicitly set it tocategoryId="0"。“Furthermore，”excludeCategoryIdParameters allow you to exclude certain categories of content.Control the number of displays and pagination (
limitandtype):limitParameters are used to control the number of contents 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 to start from the 2nd item and get 10 data items.typeThe parameter is very important, it determines the display style of the list. Set totype="list"will only displaylimita specified number of contents; set totype="page"will enable pagination in the content list, which needs to be coordinated withpaginationTags 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 the content is also important. You can choose different sorting methods as needed, such asorder="id desc"means in descending order by ID (latest release),order="views desc"means in descending order by views (most popular),order="sort desc"The sorting is in descending order according to the custom sorting value set by the backend.Filter by recommended attributes (
flag): AnQi CMS allows you to set various recommended attributes for articles or products, such as "top news", "recommended", "slider", and so on. You can useflagParameters to filter content with specific attributes, such asflag="c"Only display content marked as 'Recommended.'excludeFlagThe parameter is used to exclude content with specific attributes.Including content with subcategories (
child): By default,archiveListContains content under subcategories (child=true) If you only want to display the content directly managed by the current category without including the content of its subcategories, you can set it tochild=false.Fuzzy search (
q)：Whentype="page"when,you can go throughqto search for keywords by parameters,for exampleq="SEO优化".If the URL containsq=关键词.archiveListit will automatically read and search.custom field filteringThis is the strength of Anqi CMS. If you customize fields in the content model, such as adding "Color" or "Size" fields to the "Product" model, and set these fields as filterable in the background, then you can filter through the query parameters of the URL (such as
?color=红色&size=L) to dynamically filter content.
Dynamic interaction: document parameter filter tagarchiveFilters
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.)archiveFiltersThe tag comes into play. It does not directly display content, but generates a series of clickable filter links, which include 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 you want to generate a filtering condition for.allText: Set the display text for the 'All' or 'Unlimited' options, if set tofalseit will not be displayed.
This tag will generate afiltersvariable that contains each filterable fielditem.Name) and all its optional valuesitem.Items). Each optional value has aLabel(Display Text),Link(URL with filter parameters after clicking) andIsCurrent(Determine if currently selected). The page will refresh after the user clicks on these links,archiveListThe tag can display filtered content based on new parameters in the URL.
Page control:paginationTag
WhenarchiveListoftypethe parameter topagewhen,you,need,to,cooperatepaginationuse,a,tag,to,create,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 %}
showthe,parameter,can,control,the,number,of,page,numbers,displayed,in,pagination,navigation
actual,application:build,a,product,list,page
Assuming we need a product list page that can display all products and allow users to filter by "color" and "material", and support pagination and sorting by the most recently published.
Configure the content model and filter fields in the background:
- Ensure there is a "Product" content model (
moduleIdAssume2) - Add custom fields to the product model, such as
color(Color, single selection type, 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 the 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 %}
With such settings, users can not only see the basic list of products but also dynamically view products with different attributes based on the page filtering conditions, greatly enhancing the interactivity and information search efficiency of the website.The Anqi CMS template tag system is flexible and easy to understand, and with a little practice, you can create a feature-rich list page.
Frequently Asked Questions (FAQ)
Ask: How can I display a list of multiple conditions (such as latest articles, popular products, recommended events) on the same page? Answer:You can use multiple on the page.
archiveListLabel, each label sets different parameter conditions. For example, onearchiveListUsed to getmoduleId="1"andorder="id desc"article list, anotherarchiveListUsed to getmoduleId="2"andflag="c"product list. As long as eacharchiveListlabel specifies different variable names (such asarticles,products,activitiesThey can be displayed on the same page without interfering with each other.Question: I have set
archiveListthe condition, but there is no content displayed on the page, what could be the reason? Answer:First, please checkmoduleId