When building website pages, we often need to display various list data, such as the latest articles, product categories, navigation menus, or comment details.The template system of AnQiCMS provides us with a powerful and flexible loop iteration function, making the display of dynamic lists very simple.
The template syntax of AnQi CMS is based on the Django template engine, so users familiar with this syntax will feel very comfortable. It usesforLoop tags to iterate over a data collection and display each item in the collection one by one.
Basic iteration in the Anqi CMS template
The core iteration syntax is very intuitive:
{% for item in collection %}
{# 在这里放置你的 HTML 代码和变量，用于显示每个 item 的数据 #}
<p>{{ item.Title }}</p>
{% endfor %}
Here,collectionrepresents the dataset you want to iterate over, for example, througharchiveListthe article list obtained by tag, or throughcategoryListthe category list obtained by tag.itemThen is the single data object currently being processed in the loop, you can access the various pieces of information of this data object throughitem.属性名to access the various pieces of information of this data object, such as the title (Title), link (Link)、ID（Id）etc.
For example, if we want to display a simple list of article titles, we can do it like this:
{% archiveList archives with type="list" limit="5" %}
<ul class="article-list">
{% for article in archives %}
<li>
<a href="{{ article.Link }}">{{ article.Title }}</a>
</li>
{% endfor %}
</ul>
{% endarchiveList %}
This code first usesarchiveListThe tags have fetched the latest 5 articles from the background and assigned these data toarchivesthe variable. Then,for article in archivesThe loop will process one by onearchivesEach article in, the data of the current article is assigned in each loop,articlevariable, we can usearticle.Linkandarticle.Titleto construct the link and title of the article.
Deep Exploration: Practical Techniques in Loops
In addition to basic loops, Anqi CMS also providesforLoop also provides some practical auxiliary functions to make list display more flexible.
1. Handle empty data:{% empty %}
If a dataset is empty during iteration, you may want to display a prompt message instead of a blank page.emptythe tags can be put to use:
{% for item in archives %}
<p>{{ item.Title }}</p>
{% empty %}
<p>抱歉，目前还没有任何内容。</p>
{% endfor %}
WhenarchivesWhen the list has no data,{% empty %}Label content will be displayed.
2. Get loop information:forloopObject
InforInside the loop, you can access a specialforloopAn object that provides useful information about the current loop state. The most commonly used ones are:
forloop.Counter: The current iteration number of the loop, starting from 1.forloop.Revcounter: Current remaining iterations of the loop, counted from the total in reverse.
This is very convenient when it is necessary to handle specific items in the list (such as the first or last item). For example, adding an item to the first item of the list.activeClass:
{% for item in archives %}
<li {% if forloop.Counter == 1 %}class="active"{% endif %}>
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
3. Sorting and Reversing:reversedandsorted
You can do this onforCyclically use directlyreversedorsortedUse keywords to change the order of iteration:
{% for item in archives reversed %}Replace witharchivesReverse iterate the list.{% for item in archives sorted %}：尝试对EnglisharchivesSort the list (this usually requires the elements in the list to be comparable, such as numbers or strings).
It should be noted that more complex sorting logic (such as sorting by publication time in reverse order, sorting by views, etc.), is usually implemented through parameters of the data list tag (such asarchiveList) usedorderfor exampleorder="views desc".
4. Combine different list tags to obtain data
Anqi CMS provides various list tags to obtain different types of data sets, which can be accessed throughforloop through:
archiveList：Get list of documents such as articles, products, etc.categoryList：Get list of categories.navList：Get website navigation menu.pageList：Get list of single-page documents.tagList：Get list of tags.commentList：Get comment list.linkList：Retrieve the list of friend links.bannerList：Get home page banner list.
These tags accept different parameters to precisely control which data to retrieve, and assign the data set to a variable name for use.forLoop usage.
Application scenarios and code examples
Let us illustrate with several specific examplesforThe application of loops in the Anqi CMS template.
1. Display a list of articles with thumbnails and publication times
{% archiveList articles with type="page" limit="10" order="id desc" %}
<div class="article-grid">
{% for item in articles %}
<article class="article-card">
{% if item.Thumb %}
<a href="{{ item.Link }}" class="article-thumb">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
</a>
{% endif %}
<div class="article-info">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p class="article-desc">{{ item.Description|truncatechars:100 }}</p>
<div class="article-meta">
<span>发布日期：{{ stampToDate(item.CreatedTime, "2006年01月02日") }}</span>
<span>浏览量：{{ item.Views }}</span>
</div>
</div>
</article>
{% empty %}
<p>抱歉，目前没有找到任何文章。</p>
{% endfor %}
</div>
{% endarchiveList %}
In this example, we usearchiveListTo get the document, and settype="page"(For pagination),limit="10"(10 items per page),order="id desc"（Sorted by ID in descending order, i.e., the most recently published）。Inside the loop, we displayed the article title, link, thumbnail, and introduction, andstampToDateformatted the publish time.truncatechars:100The filter is used to truncate the introduction to avoid it being too long.
2. Nested display of multi-level classification navigation
Many websites need multi-level classification navigation, which can be achieved by nestingcategoryListTags andforLooping to implement:
English`twig {% categoryList mainCategories with moduleId=“1” parentId=“0” %}
<nav class="main-nav">
<ul>
{% for mainCat in mainCategories %}