When building a website page, 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 (AnQiCMS) provides us with a powerful and flexible loop traversal function, making the display of dynamic lists very simple.
The template syntax of AnQi CMS borrows from the Django template engine, so users familiar with this syntax will feel very comfortable. It usesforThe loop tag is used to traverse the data collection and display each item in the collection one by one.
Basic loop traversal in Anqi CMS template
The core loop traversal syntax is very intuitive:
{% for item in collection %}
{# 在这里放置你的 HTML 代码和变量，用于显示每个 item 的数据 #}
<p>{{ item.Title }}</p>
{% endfor %}
Here, collectionRepresents the data set you want to iterate through, for example, byarchiveListobtaining the list of articles through tags, or bycategoryListobtaining the list of categories. AnditemIt is the single data object being processed in the loop, you can access the various information of this data object throughitem.属性名to access the title of the data object, such asTitle), link (Link）ID（Id) and so on.
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 tag fetched the latest 5 articles from the background and assigned these data toarchivesVariable. Next,for article in archivesthe loop will process each one by one.archivesEach article in the loop, assigns the data of the current article toarticlethe variable, which we can then usearticle.Linkandarticle.Titleto construct the link and title of the article.
Explore Deep: Practical Techniques in Loops
In addition to the basic loops, Anqi CMS providesforLoops also provide some practical auxiliary functions to make list display more flexible.
1. Handle empty data:{% empty %}
If a data set is empty during iteration, you may want to display a prompt message instead of a blank page.emptyThe tags can be put into use:
{% for item in archives %}
<p>{{ item.Title }}</p>
{% empty %}
<p>抱歉，目前还没有任何内容。</p>
{% endfor %}
WhenarchivesWhen the list has no data,{% empty %}The content within the tags 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 are:
forloop.Counter: The current iteration number of the loop, starting from 1.forloop.Revcounter: The remaining number of iterations of the loop, counted from the total backwards.
This is very convenient when you need to handle specific items in the list (such as the first or last). For example, adding a prefix to the first item in 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 inforuse it directly in thereversedorsortedKeywords to change the order of traversal:
{% for item in archives reversed %}: Toarchivesreverse traverse the list.{% for item in archives sorted %}: Try toarchivessort 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, sorting by view count, etc.), is usually implemented by obtaining the data list label (such asarchiveListUsed inorderparameters, for exampleorder="views desc".
4. Combine different list tags to obtain data
Anqi CMS provides a variety of list tags to obtain different types of data sets, which can be accessed throughforLoop through:
archiveListGet a list of articles, products, and other documents.categoryListGet a list of categories.navListGet the website navigation menu.pageList: Retrieve a single-page list.tagListGet a list of tags.commentListGet a list of comments.linkListGet the list of friend links.bannerListGet the list of home page banners.
These tags all accept different parameters to precisely control which data to retrieve and assign the data set to a variable name, forforCyclic use.
Actual application scenarios and code examples
Let's demonstrate with several specific examplesforApplication of loops in Anqi CMS templates.
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 usearchiveListRetrieve the document and settype="page"(for pagination),limit="10"(10 items per page),order="id desc"(Sorted by ID in reverse order, i.e., the most recently published). Inside the loop, we displayed the article title, link, thumbnail, and summary, and thenstampToDateformatted the publish time.truncatechars:100The filter is used to truncate the introduction to avoid being too long.
2. Nested display of multi-level category navigation
Many websites need multi-level category navigation, which can be achieved through nestingcategoryListTags andforLoop to achieve:
`twig {% categoryList mainCategories with moduleId=“1” parentId=“0” %}
<nav class="main-nav">
<ul>
{% for mainCat in mainCategories %}