How to use `if` and `for` tags to flexibly control content display logic?

Unlock the secrets of Anqi CMS content display:ifwithforFlexible use of tags

AnQi CMS is dedicated to providing users with a high-efficiency and customizable content management experience.In website content operation, we often need to display different information based on different conditions, or display a series of contents in bulk.ifLogical judgment tags andforLoop through tags, they are the core for flexible content control.

AnQiCMS's template syntax is similar to Django and Blade, even if you are a beginner, you will find its structure clear and easy to learn. By skillfully usingifandforYou can make the website display a wide variety of content layouts and interaction logic without modifying the core code.

ifTags: allow content to be presented under certain conditions.

Imagine, your website needs to decide whether to display an element based on different user states, article attributes, even whether the data exists.ifThe label is born for this, it allows you to control the visibility of content based on one or more conditions.

ifThe basic usage of tags is very intuitive. You just need to wrap the content that needs to be conditionally displayed in{% if 条件 %}and{% endif %}Between. If the condition is true, the enclosed content will be rendered; otherwise, it will not be displayed.

For example, you may want to display the image only when there is a thumbnail for the article:

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

Hereitem.ThumbIt is a condition that checks whether the article data containsThumba field with a value.

Furthermore,ifTags also supportelif(else if) andelse，Allow you to construct multiple conditional judgments.This is very useful when handling complex business logic.

{% if item.Logo %}
    <img src="{{item.Logo}}" alt="{{item.Title}}">
{% elif item.DefaultLogo %} {# 假设存在一个默认Logo字段 #}
    <img src="{{item.DefaultLogo}}" alt="{{item.Title}}">
{% else %}
    <span>暂无图片</span>
{% endif %}

Besides directly checking if a variable exists or comparing values,ifThe tag can be combined with various filters provided by AnQiCMS for more detailed conditional judgments. For example, you can uselengthThe filter determines if a list is empty or passes throughcontainThe filter determines if a piece of text contains a specific keyword:

{% if categories|length > 0 %}
    <p>当前网站有分类信息。</p>
{% endif %}

{% if archive.Content|contain:"AnQiCMS" %}
    <p>这篇文章提到了AnQiCMS！</p>
{% endif %}

These flexible combinations allowifTags become an indispensable tool for controlling the display logic of content.

forTags: Batch display and loop control

In website operation, list display is one of the most common content forms, whether it is article list, product display, category navigation, or friendship links.forThe tag is used to iterate over a data collection and to render content repeatedly for each item in the collection.

forThe basic usage of a tag is to take each item from a data collection one by one and process it inside a loop:

{% for item in archives %}
    <li>
        <a href="{{item.Link}}">{{item.Title}}</a>
        <p>{{item.Description}}</p>
    </li>
{% endfor %}

here,archivesIt is usually an article list or other data collection,itemIt represents each member of the set, you can accessitemvarious properties (such asTitle/Linketc.) to construct content.

To make the loop more intelligent,forTags providedforloopA variable that contains some useful information about the current loop state. For example,forloop.CounterYou can get the current loop index (starting from 1),forloop.RevcounterCan obtain the index from the end. This is very convenient for applying special styles to the first, last, or specific position elements in a loop:

{% for item in navs %}
    <li {% if forloop.Counter == 1 %}class="first-item"{% endif %}>
        <a href="{{item.Link}}">{{item.Title}}</a>
    </li>
{% endfor %}

In addition, you can also usereversedUse a modifier to traverse the collection in reverse, or usesorteda modifier (for sortable data) to sort the traversal. When the data set may be empty,emptyLabels can be useful, they allow you to display a prompt message when the collection is empty instead of a blank page:

{% for item in products %}
    <div>{{item.Title}}</div>
{% empty %}
    <p>暂无相关产品。</p>
{% endfor %}

This way, even if there is no product data, users can get friendly feedback.

ifandforThe synergy: building complex logic

ifandforThe use of tags alone is already powerful, but when combined, they can build extremely flexible and complex display logic.A common scenario is to decide how to display based on the specific attributes of each element in a loop.

For example, when rendering a navigation menu, you may want to display the submenu section only when a navigation item contains a submenu:

{% navList navs %}
    {%- for item in navs %}
        <li>
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 判断当前导航项是否有子导航列表 #}
            <dl>
                {%- for inner in item.NavList %} {# 遍历子导航列表 #}
                    <dd><a href="{{ inner.Link }}">{{inner.Title}}</a></dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
{% endnavList %}

This example perfectly demonstratesforLoop through the main navigation, then in each iteration, useifDetermine whether the current navigation item has a sub-navigation(item.NavList) and if so, use it againforLoop through and display sub-navigation items. This nested logic is the basis for building complex structures such as multi-level menus, dynamic content blocks, etc.

Another example is in the article list, if the article is marked as 'Top News', it should have a prominent red title, otherwise maintain the normal style:

{% archiveList archives with type="list" limit="10" showFlag=true %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            {% if item.Flag|contain:"h" %} {# 假设“h”代表头条属性 #}
                <h5 style="color: red;">{{item.Title}}</h5>
            {% else %}
                <h5>{{item.Title}}</h5>
            {% endif %}
        </a>
        <p>{{item.Description}}</p>
    </li>
    {% endfor %}
{% endarchiveList %}

Byif item.Flag|contain:"h"We check the article'sFlagWhether the attribute contains 'h' (headlines), thus