During website operation, we often need to display various list data, such as article lists, product lists, image galleries, or navigation menus. AnQiCMS (AnQiCMS) provides a powerful mechanism based on the Go language template engine, among whichforLoop tags are the core tool to meet this requirement. By using them flexibly,forTag and its auxiliary function, we can easily traverse array or list data, and accurately control the display style of each element according to actual needs.
Loop tag in AnqiCMS templateforBasic Usage
In the Anqi CMS template,forThe syntax of loop tags is similar to that of most popular template engines, allowing us to iterate over each element in a collection. The most basic usage is:
{% for item in collection %}
{# 在这里显示每个item的内容 #}
{% endfor %}
HerecollectionThis is the array or list data you want to iterate over, anditemrepresents a temporary variable for the current element in each loop. For example, if you want to display the latest article list, you can use it like thisarchiveListTag to get data, then throughforDisplay through a loop:
<ul class="article-list">
{% archiveList articles with type="list" limit="5" %}
{% for article in articles %}
<li class="article-item">
<a href="{{ article.Link }}" title="{{ article.Title }}">
<h3>{{ article.Title }}</h3>
<p>{{ article.Description }}</p>
</a>
</li>
{% endfor %}
{% endarchiveList %}
</ul>
In this example,articlesIt is througharchiveListThe article set obtained by the tag,articleThen it is the variable representing each article in the loop. You can use it toarticle.TitleGet the article title,article.LinkGet the article link, etc., these properties usually correspond directly to the fields of the backend data model.
WhencollectionMay be empty when,forthe tag also provides a{% empty %}Branch used to display alternative content when there are no elements in the collection: It helps improve user experience:
<ul class="article-list">
{% archiveList articles with type="list" limit="5" %}
{% for article in articles %}
{# 文章内容展示 #}
{% empty %}
<li class="no-content">暂无最新文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
Control display style: auxiliary variable during traversal:
InforInside the loop, the Anqi CMS template engine provides some special helper variables that can help us control the display style more finely, or add serial numbers to list items.
forloop.Counter: The current loop number, starting from 1.forloop.Revcounter: The reverse loop number, for example, if the list has 5 items, the first item'sRevcounterAre 5, the second item is 4, and so on.
By using these variables, we can easily implement alternating row colors, adding special styles to the first item, and more. For example, setting different background colors for even and odd items in the list:
<ul class="article-list">
{% archiveList articles with type="list" limit="5" %}
{% for article in articles %}
<li class="article-item {% if forloop.Counter is divisibleby 2 %}even-row{% else %}odd-row{% endif %}">
<span>{{ forloop.Counter }}.</span>
<a href="{{ article.Link }}" title="{{ article.Title }}">
<h3>{{ article.Title }}</h3>
<p>{{ article.Description }}</p>
</a>
</li>
{% empty %}
<li class="no-content">暂无最新文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
here,is divisibleby 2is a filter used to judgeforloop.Counterwhether it can be divided evenly by 2 to achieve odd-even line judgment.
Conditional judgment and data filtering:ifThe clever use of tags
ifThe tag is inforLoops play an important role as well, allowing us to decide whether to display an element or apply a specific style based on conditions. CombineditemThe properties of the object can implement very flexible display logic.
For example, you may only want to display articles with thumbnails, or display a placeholder for articles without thumbnails:
`twig
- {% archiveList articles with type=“list” limit=“5” %}
{% for article in articles %}
<li class="article-item">
<a href="{{ article.Link }}" title="{{ article.Title }}">
{% if article.Thumb %} {# 检查是否存在缩略图 #}
<img src="{{ article.Thumb }}" alt="{{ article.Title }}" class="article-thumb">
{% else %}
<img src="/static/images/placeholder.webp" alt="无图" class="article-thumb-placeholder">
{% endif %}
<h3>{{ article.Title }}</h3>
<p>{{ article.Description }}</p>
</a>
</li>
{% empty %}
<li class