How to flexibly control the conditional display and loop output of content in AnQiCMS template through logical tags such as `if` and `for`?

In AnQiCMS, templates are the core of building the website appearance and displaying content.To make the content of the website more flexible and intelligent, it is crucial to be proficient in using the logic tags in the templates.ifcondition judgment andforThe two great tools for dynamic display of content are loop output labels.They allow you to display or hide content based on specific conditions, as well as efficiently iterate through and output a series of data, thereby creating highly customizable and responsive front-end pages.

AnQiCMS's template syntax design is based on the Django template engine, so it will be very easy for users familiar with this syntax to get started. Its basic rules are: variables are enclosed in double curly braces{{ 变量名 }}auto output, while logical tags such as conditional judgments and loop controls use single curly braces and percent signs{% 标签名 %}wrap, and these logical tags usually need a corresponding end tag to close.

Condition display:if/elif/elseuses

Imagine such a scenario: You want to display a piece of text, an image, or a feature button only under certain conditions, or display different content based on different situations. At this time,ifThe logical tag can be put to good use. It allows you to set conditions in the template, and only when the conditions are true will the enclosed content be displayed to the user.

ifThe basic usage of Label is very intuitive:

{% if 条件 %}
    <!-- 当条件为真时显示的内容 -->
{% endif %}

In practical applications, you may encounter situations where you need to handle multiple conditional branches. AnQiCMS templates provideelif(else if abbreviation) andelsetags to help you build more complex conditional logic:

{% if 第一个条件 %}
    <!-- 当第一个条件为真时显示的内容 -->
{% elif 第二个条件 %}
    <!-- 当第一个条件为假,且第二个条件为真时显示的内容 -->
{% else %}
    <!-- 当所有条件都为假时显示的内容 -->
{% endif %}

常用的判断场景包括:

  • 判断变量是否存在或有值:比如,您只有在文章有缩略图时才显示图片。

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

  • 比较变量的值:For example, display specific information based on the document ID, or judge a certain status value.

    {% if archive.Id == 10 %}
        <p>这是ID为10的特别推荐文章!</p>
    {% endif %}
    
    
    {% if category.ParentId == 0 %}
        <p>这是一个顶级分类。</p>
    {% endif %}
    
  • Boolean value judgment:Some variables are boolean types (True/False) and can be used directly for judgment.

    {% if item.IsCurrent %}
        <span class="active">当前选中</span>
    {% endif %}
    
  • UseinandnotOperator:Check if a value is included in a set (such as an array or list), or determine if a condition is not met.

    {# 假设 archive.Flag 包含多个推荐属性标志,如 "h,c,f" #}
    {% if "h" in archive.Flag %}
        <span class="hot-badge">热门</span>
    {% endif %}
    
    
    {% if not archive.Thumb %}
        <p>此文章暂无缩略图。</p>
    {% endif %}
    

Through these flexibleifLogical combination, you can precisely control the display of each element on the page, greatly enhancing the intelligence and interactivity of the template.

Loop output:forPowerful iteration function

When you need to display a series of similar content, such as article lists, product lists, navigation menu items, or image sliders, manually writing HTML code one by one will be very inefficient and difficult to maintain. At this time,forLoop tags become your reliable assistant. It allows you to traverse a data collection (such as byarchiveList/categoryList/navListThe data obtained from tags such as auto), and apply the same template structure to each element in the set to dynamically generate a large amount of content.

forThe basic usage of the label is:

{% for item in 集合变量 %}
    <!-- 对每一个 item 执行的操作,item 代表集合中的当前元素 -->
{% endfor %}

Traverse common data types:

AnQiCMS的许多标签都会返回一个数据集合,例如:

  • archiveList返回文档列表。
  • categoryList返回分类列表。
  • navListReturn navigation menu list。
  • pageListReturn single page list。
  • tagDataListReturn a list of documents under a certain tag.

After you have retrieved data using these tags, you can then go throughfora loop to display them. For example, display the titles of the latest 10 articles:

{% archiveList archives with type="list" limit="10" %}
    <ul>
        {% for article in archives %}
            <li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
        {% endfor %}
    </ul>
{% endarchiveList %}

forloopVariable: Enhanced loop control

InforInside the loop, AnQiCMS provides some specialforloopVariable, allowing you to better control the style or behavior of the loop:

  • forloop.Counter: English: Current iteration number (starting from 1).
  • forloop.Revcounter: English: Remaining iteration number (counting down from the total).

These variables are especially useful when you need to add odd/even styles to list items, display numbers, or determine whether it is the first/last element:

<ul>
    {% for item in archives %}
        <li class="{% if forloop.Counter is odd %}odd{% else %}even{% endif %}">
            {{ forloop.Counter }}. <a href="{{ item.Link }}">{{ item.Title }}</a>
            {% if forloop.Counter == 1 %} (最新) {% endif %}
        </li>
    {% endfor %}
</ul>

Special case handling:emptytags

When the collection you are iterating over may be empty, to avoid a blank page, you can useemptya label to provide alternative content:

{% for item in archives %}
    <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% empty %}
    <li>目前还没有任何文章发布。</li>
{% endfor %}

loop control:reversedWithsorted

AnQiCMSforTags also supportreversedandsortedkeywords to change the iteration order:

  • {% for item in archives reversed %}: Reverse traversal of a collection.
  • {% for item in archives sorted %}: Traverse the collection after sorting it (for numbers or comparable strings).

cycleLabel: Alternate display of styles or content

cycleLabels allow you to output multiple predefined values in sequence during each loop iteration. This is very convenient when you need to apply alternating CSS classes to list items or alternate between different icons.

<ul>
    {% for item in archives %}
        <li class="{% cycle 'row-a' 'row-b' %}">
            <a href="{{ item.Link }}">{{ item.Title }}</a>
        </li>
    {% endfor %}
</ul>

Here, the list items alternate.classwillrow-aandrow-bBetween.

Advanced techniques and precautions.

combined useifandfor:Masteredif