How to use if/for tags in a template to control the conditional display and looping display of content?

When building and operating a website, the dynamic display and flexible management of content are the key to improving user experience and operational efficiency. AnQiCMS (AnQiCMS) understands this and therefore its template engine provides powerful and intuitive conditional judgment ("}if) And Looping (",for) Tags, allowing you to easily control the display logic and achieve highly customized page layouts.

The template syntax of AnQiCMS has borrowed the concise style of Django template engine, with a very low learning cost.By mastering these core tags, you will be able to present website content flexibly based on specific conditions, or display list data efficiently without writing complex backend code.Let's delve deeper together to understand how to use these tags in templates, bringing vitality to your website content.

Conditional display: MasterifFlexible use of tags

ifTags are a powerful tool for conditional judgments in templates. They allow you to decide whether to display a piece of content based on the truth or falsity of an expression, or to choose one from multiple possibilities to display.This is very useful 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 that if the current document (archive) contains a thumbnail (Thumb) then display this image. Ifarchive.ThumbIf empty or false, the image part will not be rendered on the page.

When you need to handle multiple mutually exclusive conditions, you can useelif(else if) andelseTag, which is very similar to the logic of the programming languages we commonly use:

{% 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 page views (archive.Views) To display different badges. If the view count exceeds 1000, display 'Hot';If between 501 and 1000, display 'popular';Otherwise, display "Normal".

ifLabels can be used not only to determine if a variable exists or the size of the value, but also to perform complex logical judgments with other operators, 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 the current category has any subcategories. If there are, it will display the subcategory list;If not, display the article list under the category. This conditional judgment greatly improves the reusability and dynamics of the template.

Loop through:驾驭forThe powerful function of the tag

When you need to display a series of repeated content, such as article lists, product lists, navigation menus, or image galleries,forTags are your best choice. It can iterate over each element of an array or collection and execute the same template code for each element.

forThe basic syntax of loops 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 iteration. Byitem.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 iteration number, starting from 1.
• forloop.Revcounter: The remaining number of elements in the current 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 to the first item in the navigation list.activeClass, this is very convenient when highlighting the default selected item.

If your list may be empty and you want to display a friendly prompt 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 %}

WhenproductsWhen the collection is empty,emptyThe content will be rendered to avoid blank or error on the page.

Of Security CMSforTags also supportreversedandsortedModifiers that allow you to easily reverse iterate through the collection or sort by some rule (for numeric types).

{# 倒序显示文章列表 #}
{% for item in archives reversed %}
    <!-- ... 文章内容 ... -->
{% endfor %}

Combine usage: Make the template more intelligent and efficient

ifandforThe real strength of tags lies in their combined use. While iterating through data in a loop, conditional judgments can be made based on the specific attributes of each data item, enabling the implementation of 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. Inside each loop, we useif mainItem.NavListto determine if the current navigation item has a sub-navigation. If it does, we nest another one.forLoop to render the sub-navigation list. This structure allows you to build