How to implement conditional judgment and loop traversal in the Anqi CMS template to control content display?

In the AnQi CMS, the template is the core of how website content is presented. It is not only responsible for the layout and style of the content, but also for displaying different content based on different conditions and for looping through data lists.To make your website content more dynamic and interactive, it is particularly important to deeply understand how to implement conditional judgment and loop traversal in templates.The template engine of AnQi CMS adopts syntax similar to Django, which allows you to quickly get started and flexibly apply it if you are familiar with web development.

Understanding AnQiCMS template basics

In AnQiCMS template files, variable output is usually defined using double curly braces, such as{{变量名称}}. And when it comes to logic operations such as conditional judgments and loop controls, tags enclosed in single curly braces and percentage signs will be used, for example{% 标签名称 参数 %}These logical tags always appear in pairs, requiring a start tag and an end tag to define their scope, such as{% if 条件 %} ... {% endif %}or{% for item in 列表 %} ... {% endfor %}。Correct use of these tags is the first step in controlling the flexibility of content display.

Flexible content display: conditional judgmentiftags

Conditional judgment is an indispensable part of the template, it allows you to decide which content should be displayed, which should be hidden, or presented in a different way, based on the specific state of the data.ifLabel is the core of this function.

The most basic conditional judgment form is{% if 条件 %} ... {% endif %}. For example, you may want to display a special prompt only when the ID of an article is equal to 10:

{% if archive.Id == 10 %}
    <p>这是ID为10的特别推荐文章！</p>
{% endif %}

Here are thearchive.IdIt is the ID of the current document, you can replace it with any available variable or expression.

You can use it when you need to handle more complex logic.elif(else if abbreviation) andelseLabels, to construct multi-branch conditional judgment structures. For example, display different levels of popularity based on the number of views of an article:

{% if archive.Views > 1000 %}
    <p>🔥 超级热门文章！</p>
{% elif archive.Views > 500 %}
    <p>✨ 热门推荐！</p>
{% else %}
    <p>📖 最新发布！</p>
{% endif %}

This structure allows the display of content to be precisely controlled based on multiple hierarchical conditions.

In addition to numerical comparison,ifLabels can be used for various scenarios such as checking if a variable exists, whether it is true, or if a list is empty, etc. For example, to check a picture path variableitem.ThumbIs there, to avoid displaying an empty image tag:

{% if item.Thumb %}
    <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
{% else %}
    <img src="/static/images/default.jpg" alt="默认图片">
{% endif %}

You can also combine filters (filters) for more detailed judgments, such as checking if a string variable contains a certain keyword, or checking if the pagination data is the current page, in order to add links to the current pageactiveStyle:

{# 假设 pages.FirstPage 是一个分页对象，其 IsCurrent 属性表示是否为当前页 #}
<a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>

By using flexibilityif/elif/elseAnd various expressions, you can design highly customized display logic for each part of the website.

Dynamic content presentation: loop traversalfortags

The loop traversal feature is a powerful tool for handling list-type data (such as article lists, product lists, category navigation, etc.).forThe tag allows you to iterate over each element in a collection and generate the corresponding HTML structure for each element.

forThe basic syntax of the tag is{% for item in 集合 %} ... {% endfor %}Here,集合is usually an array or list,itemIt represents a temporary variable for the current element in each loop. For example, to display a list of articles:

{% archiveList archives with type="list" limit="5" %}
    {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h5>{{item.Title}}</h5>
                <p>{{item.Description}}</p>
            </a>
        </li>
    {% endfor %}
{% endarchiveList %}

In this example,archiveListthe tag fetched the first 5 articles, thenforto iteratearchivesa set, generating a list item for each article.

When you need to handle the case where the collection may be empty,forTags provide a{% empty %}A clause that executes its internal content when the collection is empty instead of displaying an empty list. This is very user-friendly: 

{% archiveList archives with type="list" limit="5" %}
    {% for item in archives %}
        <li>
            {# 文章内容 #}
        </li>
    {% empty %}
        <p>目前还没有任何文章发布。</p>
    {% endfor %}
{% endarchiveList %}

forThe loop also provides some built-in auxiliary variables for more refined control. For example,forloop.CounterCan retrieve the current loop index (starting from 1),forloop.RevcounterGet the reverse index of the current loop. This is very convenient when you need to add numbers or special styles to list items:

{% 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 to basic traversal,fortags also support some modifiers:

  • reversed：用于倒序遍历集合。{% for item in archives reversed %}
  • sorted：通常用于对集合进行默认排序（文档中提到按 int 排序，实际可能根据数据类型有不同表现）。{% for item in archives sorted %}
  • cycle：Implement loop to output a series of values, such as alternating line backgrounds.{% for item in archives %} <li class="{% cycle 'even' 'odd' %}">...</li> {% endfor %}

Nested loops are alsoforOne of the powerful features of the label. For example, in website navigation or product classification, you may need to display a multi-level classification structure:

{% categoryList categories with moduleId="1" parentId="0" %} {# 获取一级分类 #}
    <ul>
        {% for item in categories %}
            <li>
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {% if item.HasChildren %} {# 判断是否有子分类 #}
                    {% categoryList subCategories with parentId=item.Id %} {# 获取当前一级分类下的子分类 #}
                        <ul>
                            {% for inner in subCategories %}
                                <li><a href="{{ inner.Link }}">{{ inner.Title }}</a></li>
                            {% endfor %}
                        </ul>
                    {% endcategoryList %}
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endcategoryList %}

This way, you can easily build dynamic content blocks with various depths and structures.

Tips for Optimization and Debugging

During template development, some tips can help you improve efficiency and code quality:

  1. Template comments: Use{# 这是单行注释 #}Perform single-line comments, or use{% comment %} 这是多行注释 {% endcomment %}Perform multiline comments. This helps with the readability and maintainability of the code, and these comments will not appear in the final rendered HTML.
  2. Remove blank linesThe template engine may cause logic to fail during rendering