How to effectively use `if` and `for` tags for conditional judgment and data looping in AnQiCMS templates?
In the template development of AnQiCMS,ifandforLabels are undoubtedly the core tool for building dynamic content and achieving flexible layouts.They allow us to display content based on specific conditions, or efficiently iterate over data, thereby transforming static templates into feature-rich, user-demanding pages.AnQiCMS uses a syntax similar to the Django template engine, making these operations intuitive and powerful.
ifLabel: The art of conditional judgment
When you need to decide whether to display an element on the page or display different content based on a certain condition,ifThe label comes into play. Its basic structure is very clear, it can handle simple true and false judgments, and can also deal with complex multi-branch logic.
The simplest form is to check if a variable exists or is true:
{% if archive.Thumb %}
<img src="{{ archive.Thumb }}" alt="{{ archive.Title }}">
{% endif %}
Here, if the documentarchivehas a thumbnailThumbIf so, the image will be rendered. This judgment can be applied to any variable, such as checking if a list is empty, if a string has content, or if a boolean value istrue.
If you need more detailed control, when the condition is not met, you can provide alternative content, you can useelse:
{% if archive.Thumb %}
<img src="{{ archive.Thumb }}" alt="{{ archive.Title }}">
{% else %}
<img src="/static/images/placeholder.png" alt="无图">
{% endif %}
This way, if the article does not have a thumbnail, we can elegantly display a placeholder image.
For more complex scenarios, such as when navigating menus need to distinguish between the current page, parent pages with sub-menus, or other regular pages,if-elif-elsethe structure can come into full play:
{% if item.IsCurrent %}
<li class="nav-item active"><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% elif item.HasChildren %}
<li class="nav-item has-dropdown"><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% else %}
<li class="nav-item"><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endif %}
Here, item.IsCurrentanditem.HasChildrenIt is a common boolean attribute in navigation list items, indicating whether the item is the current page or has a submenu.By such condition judgment, we can apply different styles or behaviors to navigation items in different states.
ifTags support various comparison operators, such as equal (==), not equal (!=), greater than (>), less than (<), greater than or equal (>=), less than or equal to (<=). In addition, you can useand/orfor logical combination, as well asnotfor logical NOT operation. For example, to judge a number range or the satisfaction of multiple conditions at the same time.
forLabel: Efficiently looping data
The core of a website is usually the display of content lists, whether it is an article list, product list, or navigation menu, similar structures need to be rendered repeatedly.forTags are born for this, they allow you to easily traverse array or slice and other collection types of data.
BasicforThe loop syntax is as follows:
{% for item in archives %}
<div class="article-card">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description }}</p>
<span>发布时间: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</div>
{% endfor %}
In this example,archivesIt may be a pass througharchiveListThe article list obtained by the tag. Eachitemrepresents an article object in the list, we canitem.Title/item.Linkin this way to access various properties of the article.
In order to better control the loop process,forThe tag also provides several practical built-in variables:
forloop.Counter: The current loop index, starting from1start counting.forloop.Revcounter: The remaining loop count (including the current one), counted down from the total.
These variables are very useful when special styles need to be applied to the first or last item in the loop:
{% for item in archives %}
<li class="{% if forloop.Counter == 1 %}first-item{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
When you retrieve data from the database, the list may sometimes be empty. To avoid the page from being blank or showing errors,forTags provide aemptythe clause will execute when the collection in the loop is empty,emptythe content inside:
{% for item in archives %}
<div class="article-card">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
</div>
{% empty %}
<p>当前没有可用的文章。</p>
{% endfor %}
Furthermore,forTags also supportreversedandsortedThe modifier allows you to adjust the order of loops at the template level.reversedIt will traverse the collection in reverse order.sortedIt will attempt to sort the collection (usually for numbers or comparable strings).
{# 倒序显示文章列表 #}
{% for item in archives reversed %}
...
{% endfor %}
{# 排序后显示文章列表 #}
{% for item in archives sorted %}
...
{% endfor %}
ifandforThe application of combinations: building complex layouts
ifandforThe true power of tags lies in their combined use. By using nested loops or adding conditional judgments within loops, we can build extremely flexible and dynamic page structures.
A typical scenario is to build a multi-level navigation menu. Imagine a main navigation with sub-items under each main item, and these sub-items may be associated with articles under a certain category:
{# 假设 navs 是通过 navList 标签获取到的主导航列表 #}
<ul class="main-nav">
{% for mainItem in navs %}
<li class="{% if mainItem.IsCurrent %}active{% endif %}">
<a href="{{ mainItem.Link }}">{{ mainItem.Title }}</a>
{% if mainItem.NavList %} {# 检查是否有子导航 #}
<ul class="sub-nav">
{% for subItem in mainItem.NavList %}
<li class="{% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
{% if subItem.PageId > 0 %} {# 假设 PageId 大于0表示关联到分类 #}
{% categoryList categories with parentId=subItem.PageId %} {# 获取该分类的子分类 #}
{% if categories %}
<ul class="third-nav">
{% for thirdItem in categories %}
<li><a href="{{ thirdItem.Link }}">{{ thirdItem.Title }}</a></li>
{% endfor %}
</ul>
{% else %}
{# 如果没有子分类，尝试显示该分类下的文档 #}
{% archiveList products with type="list" categoryId=subItem.PageId limit="5" %}
{% if products %}
<ul class="third-nav">
{% for product in products %}
<li><a href="{{ product.Link }}">{{ product.Title }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{% endif %}
{% endcategoryList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
This complex example shows how to combinenavList/categoryListandarchiveListtags, utilizeifdetermine whether the navigation item is current, whether it has child items or associated categories, as well asforLooping nested traversal of multi-level structures. Through such combinations, you can build any required navigation or content display logic.
When processing content in templates, especially like article detailsitem.ContentThis is a rich text field, AnQiCMS defaults to HTML escaping to prevent security issues. If you are sure that the content is safe and you want the browser to parse it as HTML rather than plain text,