It is the key to enhancing user experience and website attractiveness to display dynamic and diverse content in website content management.AnQiCMS (AnQiCMS) provides a powerful template system, drawing inspiration from the Django template engine syntax, allowing you to easily control the display of content through logical tags.iftags are used for conditional judgment,forLabels are used for looping, they are the foundation for building flexible and variable pages.
Flexible condition judgment:ifThe wonders of logical labels
ifThe label allows you to determine which content on the page should be displayed and which should be hidden based on specific conditions. This makes content display more intelligent and adaptable to various business logic.
basicif语法非常直观：
{% if 条件 %}
<!-- 当条件为真时显示的内容 -->
{% endif %}
例如，您可能希望只有当文档包含缩略图时才显示图片：
{% if item.Thumb %}
<img src="{{item.Thumb}}" alt="{{item.Title}}">
{% endif %}
当您的业务逻辑需要处理多个可能性时，可以使用elif(else if abbreviation) andelse子句：
{% if 条件1 %}
<!-- 当条件1为真时显示的内容 -->
{% elif 条件2 %}
<!-- 当条件1为假且条件2为真时显示的内容 -->
{% else %}
<!-- 当所有条件都为假时显示的内容 -->
{% endif %}
An English translation of this common application scenario would be: 'A common application scenario is to decide on the display of different content based on whether a category has subcategories, such as in the navigation menu: '
{% if item.HasChildren %}
<!-- 显示子分类列表 -->
<ul>
{% categoryList subCategories with parentId=item.Id %}
{% for inner in subCategories %}
<li><a href="{{inner.Link}}">{{inner.Title}}</a></li>
{% endfor %}
{% endcategoryList %}
</ul>
{% else %}
<!-- 显示该分类下的文档列表 -->
<p>该分类下暂无子分类，点击查看文档。</p>
<ul>
{% archiveList products with type="list" categoryId=item.Id limit="8" %}
{% for inner in products %}
<li><a href="{{inner.Link}}">{{inner.Title}}</a></li>
{% endfor %}
{% endarchiveList %}
</ul>
{% endif %}
In conditional expressions, you can also useand/or/notCombine more complex conditions using logical operators, for example:
{% if user.IsLoggedIn and user.IsVip %}
<p>欢迎尊贵的VIP用户，这是专属内容！</p>
{% endif %}
{% if not archive.IsPublished %}
<p>此文章仍在草稿状态，暂未发布。</p>
{% endif %}
Through these flexibleifStructure, you can precisely control the display and hide of page elements, so that your website content can present the most appropriate form in different situations.
Powerful cyclic display:forThe art of cyclic tags
forLabels are a key tool in AnQi CMS templates used for traversing arrays, slices (slice), or other iterable objects, allowing you to dynamically generate lists, navigation, image galleries, and other repetitive content without manually writing each element.
forThe basic structure of the loop is as follows:
{% for item in collection %}
<!-- 针对集合中每个item显示的内容 -->
{% endfor %}
For example, to display a list of multiple articles under a category:
{% archiveList archives with type="list" categoryId="1" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<p>{{item.Description}}</p>
</a>
</li>
{% endfor %}
{% endarchiveList %}
It is worth mentioning that,forThe loop also provides aemptyauto, used to display alternate content when the collection in the loop is empty, which is very helpful for enhancing user experience: English
{% for item in archives %}
<li><a href="{{item.Link}}">{{item.Title}}</a></li>
{% empty %}
<li>当前分类下没有找到任何文章。</li>
{% endfor %}
PassemptyThe clause allows you to avoid the page looking empty when there is no data and to provide users with friendly prompts.
You can also access some special loop variables during the loop process, such as:
forloop.Counter: Current iteration count, starting from 1.forloop.Revcounter: Remaining iteration count, calculated in reverse.
These variables are very useful when you need to add styles or numbering to specific items in the loop:
{% for item in archives %}
<li class="{% if forloop.Counter == 1 %}first-item{% endif %}">
<span>{{ forloop.Counter }}.</span> <a href="{{item.Link}}">{{item.Title}}</a>
</li>
{% endfor %}
In addition,forThe loop also supportsreversedandsortedModifiers used for traversing in reverse order and traversing after sorting by default rules. Although they are not as commonly used as basic loops, they can provide more convenience in specific scenarios.
Comprehensive Application:ifWithforThe collaboration
In actual template development,ifandfortags are often used together. You may find aforuseifDisplay different content based on the different properties of each item, or in oneifcondition that includes aforloop to display the list under specific conditions.
For example, in a navigation list, you may need to iterate through all navigation items and add different styles or display different structures based on whether the navigation item has a sub-navigation or is the current page:
{% navList navs %}
<ul>
{% for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{% if item.NavList %} <!-- 如果有子导航 -->
<dl>
{% for subItem in item.NavList %}
<dd class="{% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{subItem.Title}}</a>
</dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
When displaying rich text content fetched from the backend using these tags, please be sure to use|safea filter to prevent HTML tags from being escaped and displayed as plain text:
<!-- 如果 archiveContent 包含 HTML 标签，需要使用 |safe 过滤器 -->
<div>{{ archiveContent|safe }}</div>
by cleverly combiningifandforYou can build highly dynamic, responsive, and content-rich web page, meeting various complex content display needs.These logic tags provided by Anqi CMS will greatly improve the efficiency and flexibility of your content operation.
Common Questions (FAQ)
1. When I useforHow can I display a 'No content' prompt on the page if the list is empty when I traverse a list in a loop?You can useforLoopingemptySentence. When the collection of the loop is empty,emptythe content of the sentence will be displayed. For example:
{% for item in articles %}
<p>{{ item.Title }}</p>
{% empty %}
<p>抱歉，目前没有找到任何文章。</p>
{% endfor %}
2. How toforDo you want to add unique styles or behaviors to the first, last, or specific elements in a loop?InforInside the loop, you can useforloop.Counterandforloop.RevcounterThese special variables.forloop.CounterRepresents the current loop index (starting from 1),forloop.RevcounterIndicates how many items are left until the end of the loop from the current position.
For example, add to the first element.firstClass: