When building and operating a website, dynamic display and flexible management of content are crucial for enhancing user experience and operational efficiency. AnQiCMS (AnQi Content Management System) fully understands this, and therefore its template engine provides powerful and intuitive conditional judgment (if) And loop traversal (for) Tags, allowing you to easily control the display logic of content and achieve highly customized page layouts.
The template syntax of AnQi CMS is based on the concise style of Django template engine, which has a very low learning cost.Through mastering these core tags, you will be able to present website content flexibly according to specific conditions, or repeat display list data in an efficient manner, without writing complex backend code.Next, let's delve into how to use these tags in templates to bring vitality to your website content.
Conditional display: MasterifFlexible Use of Tags
ifLabels are the tools you use for conditional judgment in templates.It allows you to decide whether to display a piece of content based on the truth value of an expression, or to choose one to display from multiple possibilities.This is very practical in many scenarios, such as displaying images based on whether the article has a thumbnail or displaying different operation buttons based on user permissions.
The most basicifThe usage is to judge a condition:
{% if archive.Thumb %}
<img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" />
{% endif %}
The meaning of this code is, if the current document (archive) contains a thumbnail (Thumb), then display this image. Ifarchive.ThumbEmpty or false value, the image will not be rendered on the page.
When you need to handle multiple mutually exclusive conditions, you can useelif(else if) andelseLabel, which is very similar to the logic of common programming languages we encounter:
{% if archive.Views > 1000 %}
<span class="hot-badge">热门</span>
{% elif archive.Views > 500 %}
<span class="popular-badge">受欢迎</span>
{% else %}
<span class="normal-badge">普通</span>
{% endif %}
Here, we will base the document's browsing volume (archive.Views) To display different badges.If the views exceed 1000, display 'Hot'; if between 501 and 1000, display 'Popular'; otherwise, display 'Normal'.
ifLabels can be used not only to determine whether a variable exists or to compare the magnitude of a number, but also to work with other operators to perform more complex logical judgments, such as determining whether a variable is not equal to a certain value, or whether a set contains a certain element.
{# 检查分类是否有子分类，决定显示子分类列表还是直接显示文档 #}
{% if category.HasChildren %}
<!-- 显示子分类导航 -->
<ul class="sub-category-list">
{% categoryList subCategories with parentId=category.Id %}
{% for subCat in subCategories %}
<li><a href="{{ subCat.Link }}">{{ subCat.Title }}</a></li>
{% endfor %}
{% endcategoryList %}
</ul>
{% else %}
<!-- 显示当前分类下的文章列表 -->
<ul class="article-list">
{% archiveList articles with categoryId=category.Id limit="10" %}
{% for article in articles %}
<li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
{% endfor %}
{% endarchiveList %}
</ul>
{% endif %}
In this example,if category.HasChildrenIt will check if there are subcategories under the current category.If there is, display the subcategory list; if not, display the article list under the category.This condition judgment greatly improves the reusability and dynamics of the template.
Loop traversal:驾驭forThe powerful functions of tags
When you need to display a series of repeated content, such as article lists, product lists, navigation menus, or image galleries,forLabels are your best choice. It can iterate over each element in an array or collection and execute the same template code for each element.
forThe basic syntax of the loop is very simple:
{% for item in archives %}
<div class="article-item">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description }}</p>
</div>
{% endfor %}
Here,archivesIt is a collection of document lists,itemIt represents a document object from the collection in each loop. Throughitem.Linkanditem.TitleWe can easily access the link and title of each document.
In the loop, you can also access some special variables that provide information about the current loop state, such as:
forloop.Counter: The current loop number, starting from 1.forloop.Revcounter: Current number of remaining elements in the loop.
These variables are very useful when applying different styles to specific items in the list:
{% for navItem in navs %}
<li class="{% if forloop.Counter == 1 %}active{% endif %}">
<a href="{{ navItem.Link }}">{{ navItem.Title }}</a>
</li>
{% endfor %}
This code will add a style to the first item in the navigation list:activeThis is very convenient when highlighting the default selected item.
If your list may be empty and you want to display a friendly prompt message when there is no content, you can useemptyTags:
{% for product in products %}
<div class="product-card">
<h4>{{ product.Title }}</h4>
<img src="{{ product.Thumb }}" alt="{{ product.Title }}" />
</div>
{% empty %}
<p>抱歉，目前没有产品可供展示。</p>
{% endfor %}
WhenproductsThe collection is empty,emptySome content will be rendered to avoid blank pages or errors.
Anqi CMS'sforTags also supportreversedandsortedModifiers that allow you to easily reverse iterate through a collection or sort it according to some rule (for numeric types).
{# 倒序显示文章列表 #}
{% for item in archives reversed %}
<!-- ... 文章内容 ... -->
{% endfor %}
Combine usage: Make the template more intelligent and efficient
ifandforThe true strength of tags lies in their combined use.While traversing the data in a loop, make conditional judgments based on the specific attributes of each data item, which can achieve very complex dynamic content display.
Let's look at a classic example: building a multi-level navigation menu. Suppose we have a list of top-level categories, each of which may contain subcategories.
<nav>
<ul class="main-nav">
{% navList mainNavItems with typeId=1 %} {# 假设 typeId=1 是主导航 #}
{% for mainItem in mainNavItems %}
<li {% if mainItem.NavList %}class="has-submenu"{% endif %}>
<a href="{{ mainItem.Link }}">{{ mainItem.Title }}</a>
{% if mainItem.NavList %} {# 如果有子导航列表 #}
<ul class="submenu">
{% for subItem in mainItem.NavList %}
<li><a href="{{ subItem.Link }}">{{ subItem.Title }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
In this example, the outer layerforLoop through the main navigation items. Within each iteration, we useif mainItem.NavListto determine if the current navigation item has a sub-navigation. If it does, then we nest anotherforRender child navigation list using a loop. This structure allows you to build