In AnQiCMS template development,ifandforTags are undoubtedly the core tools 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, responsive pages that meet user needs.AnQiCMS uses syntax similar to Django template engine, making these operations both intuitive and powerful.
ifLabel: The art of conditional judgment.
When you need to decide whether to display an element on a page or display different content based on a certain condition,ifTags come into play. Its basic structure is very clear, capable of handling simple true or false judgments, and can also cope 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 documentarchivea thumbnail existsThumbThen 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, provide alternative content when conditions are not met, you can useelse:
{% if archive.Thumb %}
<img src="{{ archive.Thumb }}" alt="{{ archive.Title }}">
{% else %}
<img src="/static/images/placeholder.png" alt="无图">
{% endif %}
So, if the article does not have a thumbnail, we can elegantly display a placeholder image.
For more complex scenarios, such as distinguishing the current page, parent pages with sub-menus, or other ordinary pages in the navigation menu,if-elif-elsethe structure can really shine:
{% 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.HasChildrenIs a common boolean attribute in the navigation list item, indicating whether this item is the current page or whether it has a submenu.By such conditional judgment, we can apply different styles or behaviors to navigation items of different states.
if标签支持多种比较运算符，如等于 (English)==)、不等于 (English)!=)、大于 (English)>)、小于 (English)<)、大于等于 (English)>=）小于等于（<=）。此外，您还可以使用and/or进行逻辑组合，以及not进行逻辑非操作。例如，判断一个数值范围或多个条件同时满足的情况。
for标签：Efficient data looping
The core of a website is usually a list display of content, whether it is an article list, product list, or navigation menu, similar structures need to be rendered repeatedly.forTags are born for this, allowing 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,archivesmay be a througharchiveListthe article list obtained by the tag. Each in the loopitemrepresent a list of article objects, we can accessitem.Title/item.LinkIn this way, you can access various properties of the article.
to better control the loop process,fortags also provide several practical built-in variables:
forloop.Counter: the current loop index, starting from1.forloop.Revcounter: Remaining loop count (including current one), counted from the total backwards.
These variables are very useful when applying special styles to the first or last item in a 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 showing blank or errors,forTags provide aemptythe clause will execute when the loop collection 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 %}
In addition,forTags also supportreversedandsortedThe modifier allows you to adjust the order of loops at the template level.reversedWill traverse the collection in reverse order,sortedWill attempt to sort the collection (usually for numbers or comparable strings).
{# 倒序显示文章列表 #}
{% for item in archives reversed %}
...
{% endfor %}
{# 排序后显示文章列表 #}
{% for item in archives sorted %}
...
{% endfor %}
ifandforthe combination use: building complex layouts
ifandforThe true power of tags lies in their combination use. By using nested loops or adding conditional judgments inside loops, we can build extremely flexible and dynamic page structures.
An example 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 certain categories:
{# 假设 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 demonstrates how to combinenavList/categoryListandarchiveListlabels, utilizingifwhether the navigation item is current, has child items, or associated categories,forLoop nested iteration of multi-level structures. With such combinations, you can build any required navigation or content display logic.
When handling content in templates, especially for articles detailsitem.ContentSuch a rich text field, AnQiCMS will default 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,