In AnQi CMS template development, effectively traversing and outputting arrays or lists is a core skill for building dynamic and rich content pages.As an experienced CMS operation person in the security industry, I am well aware of the importance of flexibly using template tags for content presentation.AnQi CMS adopts a syntax similar to the Django template engine, making content looping and conditional judgments intuitive and powerful.
Anqi CMS template engine loop mechanism
In the template design of AnQi CMS,forThe loop iteration tag is a key tool for processing array or list data.It allows us to access each item in the collection one by one and display the data of each item on the page.Whether it is to display a list of articles, product categories, or friend links,forLoops are the essential foundation.
When we need to traverse a list or array provided by Anqi CMS, we use{% for item in collection %}such a structure. Here is thecollectionrepresent the array or list variable to be traversed, anditemis the temporary variable for each item in the loop. Within the loop, we can use{{ item.属性名 }}In order to access the various data items of the current project. For example, to output the titles of each article in the article list, we can define aarchivesvariable to receive the article list, and then use{{ item.Title }}To get its title.
Basic Traversal and Output Practice
Assuming we want to display the latest ten articles on the homepage. We can usearchiveListtags to get the list of articles and assign it to a variable, such asarchives. Then, throughforLoop to process and output the titles and links of these articles one by one.
Here is a typical example:
<div class="latest-articles">
{% archiveList archives with type="list" limit="10" %}
{% for article in archives %}
<div class="article-item">
<a href="{{ article.Link }}">{{ article.Title }}</a>
<p>{{ article.Description }}</p>
<span>发布日期：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
</div>
{% endfor %}
{% endarchiveList %}
</div>
In this example,archivesReceived the latest ten articles.articleThe variable represents the current article in each loop, and we can easily accessarticle.Link/article.Titleandarticle.Descriptionits properties and make use ofstampToDateformatted timestamps.
the application of loop auxiliary variables.
To achieve finer control or display in loops, AnQi CMS provides several built-in loop auxiliary variables.forloop.CounterCan get the current loop index (starting from 1), andforloop.RevcounterIt represents the number of remaining elements in the current loop. These variables are very useful when you need to distinguish the first, last, or for serial display.
For example, if we want to add a special style to the first element of the list:
<ul class="product-list">
{% archiveList products with type="list" moduleId="2" limit="5" %}
{% for product in products %}
<li class="product-item {% if forloop.Counter == 1 %}featured{% endif %}">
<a href="{{ product.Link }}">{{ forloop.Counter }}. {{ product.Title }}</a>
</li>
{% endfor %}
{% endarchiveList %}
</ul>
here,forloop.Counter == 1Determine if the current element is the first element of the loop, and if so, addfeaturedClass. At the same time, we also output the element number.
An elegant way to handle an empty set.
In the actual content display, a list or array may sometimes be empty. To avoid blank or error pages, the Anqi CMS'sfora loop that{% empty %}Tags to handle this situation. Whenforthe collection being traversed by the loop is empty, {% empty %}The content within the tags will be rendered.
This allows us to provide users with friendly prompts instead of an empty page:
<div class="category-articles">
{% archiveList categoryArchives with type="page" categoryId="当前分类ID" limit="10" %}
{% for item in categoryArchives %}
<div class="article-preview">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description }}</p>
</div>
{% empty %}
<p>该分类下暂无文章，敬请期待！</p>
{% endfor %}
{% endarchiveList %}
</div>
In this way, evencategoryArchivesNo data, the page can also display the preset prompt information, enhancing the user experience.
Advanced loop operation and data processing
Of Security CMSforLoops also supportreversedandsortedModifiers, used to change the order of iteration.reversedYou can traverse the list in reverse, andsortedthen try to sort the sortable elements (such as numeric lists). Moreover,cycleTags allow us to alternate a series of predefined values in a loop, which is very convenient when alternating styles or content.
For example, traverse articles in reverse order of publication time or sort by ID:
<ul class="sorted-list">
{% archiveList allArchives with type="list" limit="5" order="created_time desc" %} {# 假设 order 语法支持created_time desc #}
{% for item in allArchives reversed %} {# 反向遍历 #}
<li>{{ item.Title }}</li>
{% endfor %}
{% endarchiveList %}
</ul>
<ul class="cycled-list">
{% categoryList categories with moduleId="1" parentId="0" limit="3" %}
{% for category in categories %}
<li class="{% cycle 'even' 'odd' %}" >{{ category.Title }}</li> {# 轮流输出even或odd #}
{% endfor %}
{% endcategoryList %}
</ul>
sortedKeywords are usually used to sort lists of numbers or strings. Although the documentsortedExamples are forintBut in actual use, ifcollectionis a sortable list, it will try to sort.
Examples of actual application scenarios
In Anqi CMS, array or list traversal is everywhere.
- Multi-level navigation menu: Through nesting
categoryListTags andforLoops can build multi-level navigation menus of unlimited depth, perfectly matching complex website structures. - Product parameter displayWhen a product has multiple custom parameters (such as color, size), and these parameters are stored in an array, you can use
archiveDetailto retrieve these parameters, and thenfordisplay them one by one in a loop. - image gallery or slideshow: If a piece of content (article, product, page) has multiple images, it is usually stored in an array format. Utilize
archiveDetailto retrieve the image array (such asImagesfield), and then combineforLoop output<img>Tag to build a gallery or carousel.
For example, get the image group of the article and display it:
<div class="gallery">
{% archiveDetail currentImages with name="Images" %}
{% for imgUrl in currentImages %}
<img src="{{ imgUrl }}" alt="图片描述" />
{% endfor %}
{% endarchiveDetail %}
</div>
ThisforThe flexibility of loops allows Anqi CMS to easily meet various content display needs, whether it is a simple list or a complex data structure, an efficient solution can always be found.
Summary
Mastering the array or list traversal techniques in AnQi CMS template is the key to building efficient and flexible websites.forLoops and its rich auxiliary variables and modifiers provide powerful content display capabilities for website operators.By using these tags reasonably, we can present the data from the background management in the most user-friendly way on the front-end page, thereby enhancing the user experience and the appeal of the content.
Frequently Asked Questions (FAQ)
1. How toforIn the loop, how to determine if the current element is the first or last?
In AnQi CMS'sforIn a loop, you can use built-inforloop.Counterandforloop.Revcountervariables to judge.forloop.CounterCounting starts from 1, so{% if forloop.Counter == 1 %}you can judge if it is the first element.forloop.RevcounterIt indicates how many elements are left from the current element to the end of the list, when{% if forloop.Revcounter == 1 %}it is true, indicating that the current element is the last one.
2. How can I nest loops in a loop to process multi-level data structures, such as multi-level categories?
The AnQi CMS template engine supports nested loops. You can get an element containing a sublist in the outer loop, and then iterate over this sublist in the inner loop.For example, to display multi-level categories, you cancategoryListin the outer loop to obtain the first-level category, and then call it again in the inner loopcategoryListand pass inparentIdFor the current first-level category'sId.
{% categoryList mainCategories with moduleId="1" parentId="0" %}
<ul>
{% for mainCat in mainCategories %}
<li>
<a href="{{ mainCat.Link }}">{{ mainCat.Title }}</a>
{% if mainCat.HasChildren %}
{% categoryList subCategories with parentId=mainCat.Id %}
<ul>
{% for subCat in subCategories %}
<li><a href="{{ subCat.Link }}">{{ subCat.Title }}</a></li>
{% endfor %}
</ul>
{% endcategoryList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endcategoryList %}
3. What if I need to traverse and display an array type field of a custom model on the page (for example, multiple images)?
For fields set as array type in a custom model (such as an image groupImagesor other custom group image fields), you can first usearchiveDetailLabel retrieves the value of this array field and then assigns it to a variable, and then performs operations on this variableforlooped through.
{% archiveDetail allImages with name="Images" %} {# 获取当前文档的所有图片，并赋值给allImages变量 #}
<div class="image-gallery">
{% for imageUrl in allImages %}
<img src="{{ imageUrl }}" alt="图片展示" class="gallery-image" />
{% endfor %}
</div>
{% endarchiveDetail %}
here,allImagesThe variable carries the array of image URLs,forLoop through and output each image one by onesrcProperty.