How to use if and for tags in templates to implement conditional judgment and loop display of data?

When building a website with AnQiCMS, the template is the key to content display.By flexibly using template tags, we can present the content of the background management in various forms. Among them,ifandforTags act as the core of template logic control, helping us to implement conditional judgments and the cyclic display of data, making the website content more dynamic and rich.

AnQiCMS's template engine borrows the syntax style of Django, which makes learning and using these tags very intuitive.It allows us to directly write logic in the template, display different content based on different conditions, or iterate through a dataset, outputting each data item one by one without complex programming knowledge.

I. Conditional judgment: Flexible control of content display (iftags)

ifTags are the basis for conditional judgment, allowing us to decide whether or not to display, or how to display a piece of content based on the truth or falsity of a condition. Its basic structure is very simple, through{% if 条件 %}and ends with{% endif %}end.

Basic usage

Imagine, you want to display the article title on the article detail page, but some articles may be empty due to some reason. You can useiftags to judge:

{% if archive.Title %}
    <h1>{{ archive.Title }}</h1>
{% else %}
    <h1>[无标题]</h1>
{% endif %}

This code will checkarchive.TitleDoes it exist, if it exists, display the article title, otherwise display '[No Title]'.

If-else conditions

When you need to handle more complex logic,ifTags also supportelif(else if) andelseTo build multiple judgments. For example, would you like to display different styles based on the article ID:

{% if archive.Id == 1 %}
    <p class="highlight-article">这是ID为1的特别文章。</p>
{% elif archive.Id > 100 %}
    <p class="new-article">这是一篇较新的文章，ID大于100。</p>
{% else %}
    <p>这是一篇普通文章。</p>
{% endif %}

Here, the template will first check if the article ID is 1, if not, then check if it is greater than 100, and finally, if neither condition is met, it will display a prompt for a regular article.

Example of practical scenarios

ifTags are widely used in practical applications. For example, determining whether a data set contains an image thumbnail to decide whether to display the image:

{% if item.Thumb %}
    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
{% endif %}

Or in the navigation menu, add different CSS classes based on whether the current page is active:

<li class="{% if item.IsCurrent %}active{% endif %}">
    <a href="{{ item.Link }}">{{ item.Title }}</a>
</li>

These all demonstrateifThe powerful role of tags in controlling the visibility and style of page elements.

II. Loop display: Efficiently present list data (fortags)

forThe tag is used to iterate over array or collection type data, displaying each item of the collection one by one.This is crucial in scenarios such as displaying article lists, product lists, and navigation menus.It's basic structure is{% for 变量名 in 集合 %}and ends with{% endfor %}end.

Basic usage

Assuming you get an article list from the AnQiCMS backend ({% archiveList archives with type="list" limit="10" %}This label is retrieved) and assigned toarchivesThis variable. You can display it like this in a loop:

{% for article in archives %}
    <div class="article-item">
        <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
        <p>{{ article.Description }}</p>
        <span>发布时间：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
    </div>
{% endfor %}

here,articleThat is each data item in the loop, we can usearticle.Title/article.Linkand so on.stampToDateIs a date formatting function provided by AnQiCMS, which can convert timestamps into a readable date format.

Loop auxiliary variable

forWithin the loop, some very useful auxiliary variables are also provided to help us better control the loop logic or display information:

• forloop.Counter: The current iteration number of the loop, starting from 1.
• forloop.Revcounter: The number of times the current loop is away from the end, counting down from the total.

For example, do you want to add a 'new' tag to the first article in the list:?

{% for article in archives %}
    <div class="article-item {% if forloop.Counter == 1 %}latest-article{% endif %}">
        {% if forloop.Counter == 1 %}<span>[最新]</span>{% endif %}
        <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
        <p>这是第 {{ forloop.Counter }} 篇文章。</p>
    </div>
{% endfor %}

Handle empty data

If the collection in the loop may be empty, you would like to display a friendly prompt when there is no data instead of leaving it blank, you can use{% empty %}Sub-tag:

{% for article in archives %}
    <!-- 显示文章内容 -->
{% empty %}
    <p>抱歉，目前没有可显示的文章。</p>
{% endfor %}

WhenarchivesWhen the collection is empty,{% empty %}The content inside the block will be displayed.

Advanced usage: Sorting and Reversing

forTags also supportreversedandsortedA modifier used to reverse or sort the collection before the loop (for integer arrays).

{% for item in archives reversed %}
    <!-- 以相反的顺序显示文章 -->
{% endfor %}

{% for item in some_numbers sorted %}
    <!-- 对数字进行排序后显示 -->
{% endfor %}

III.ifwithforApplication of the combination.

ifandforThe true power of tags lies in their ability to be combined, creating highly dynamic and interactive template structures when used together.

Build multi-level navigation menus

A common example is to build a multi-level navigation menu. It is from AnQiCMS.navListThe tag can get navigation data, which may contain sub-navigation.NavList. We can use it toforTraverse the main navigation, and then useifDetermine if there is a child navigation, if so, use it againforTraverse the child navigation.

{% navList navs %}
<ul class="main-nav">
    {% for main_item in navs %}
        <li {% if main_item.IsCurrent %}class="active"{% endif %}>
            <a href="{{ main_item.Link }}">{{ main_item.Title }}</a>
            {% if main_item.NavList %} {# 判断是否有子导航 #}
                <ul class="sub-nav">
                    {% for sub_item in main_item.NavList %} {# 遍历子导航 #}
                        <li {% if sub_item.IsCurrent %}class="active"{% endif %}>
                            <a href="{{ sub_item.Link }}">{{ sub_item.Title }}</a>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

This example perfectly demonstratesifandforHow to collaborate, dynamically generate complex user interfaces based on the hierarchical structure of data.

IV. Notes for writing templates.

While usingifandforWhen labeling, some details need to be paid attention to in order to ensure the correctness and fluency of the template:

• Tag closure: ifTags must be prefixed with `{%