How to flexibly control the conditional display and loop output of content in AnQiCMS templates through `if`, `for`, and other logical tags?

In AnQiCMS, the template is the core of building the website's appearance and displaying content.It is crucial to be proficient in using the logical tags in the template to make the content of the website more flexible and intelligent.This is,ifcondition judgment andforLoop output tags are the two great tools for dynamic content display.They allow you to display or hide content based on specific conditions, as well as efficiently traverse and output a series of data, thereby creating highly customized and responsive frontend pages to meet user needs.

The template syntax design of AnQiCMS has borrowed from the Django template engine, so it will be very easy for users familiar with this syntax to get started. Its basic rule is: variables are used with double curly braces{{ 变量名 }}output, while logical tags such as condition judgment and loop control use single curly braces and percentage signs{% 标签名 %}wrap, and these logical tags usually need a corresponding closing tag.

Conditional display:if/elif/elseusefulness

Imagine such a scenario: You want to display a piece of text, an image, or a functional button only under certain conditions, or display different content based on different situations. At this point,ifLogical tags are very useful. They allow you to set conditions in the template, and only when the condition is true will the content wrapped be displayed to the user.

ifThe basic usage of tags is very intuitive:

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

In practice, you may encounter situations where you need to handle multiple conditional branches. The AnQiCMS template provideselif(else if abbreviation) andelsetags, allowing you to build more complex conditional logic:

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

Common judgment scenarios include:

• Check if a variable exists or has a value:For example, you will display the image only when there is a thumbnail in the article.

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

• Compare the value of variables: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 inherently boolean (True/False) and can be used directly for judgment.

  
  {% if item.IsCurrent %}
      <span class="active">当前选中</span>
  {% endif %}
  

• UseinandnotOperator: Check if a value is contained within a collection (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:forThe powerful functionality of iteration

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,forThe loop tag becomes your powerful assistant. It allows you to iterate over a data collection (such as byarchiveList/categoryList/navListData obtained by tags, and applies the same template structure to each element in the collection, thereby dynamically generating a large amount of content.

forThe basic usage of tags is:

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

Traverse common data types:

AnQiCMS many tags will return a data set, for example:

• archiveListReturn document list.
• categoryListReturn category list.
• navListReturn navigation menu list.
• pageListReturn single page list.
• tagDataListReturn the document list under a certain tag.

After you use these tags to get the data, you can then go throughforLoop 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: The current iteration number of the loop (starting from 1).
• forloop.Revcounter: The remaining iteration number of the loop (decreasing from the total number).

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

<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:emptyTag

When you traverse a collection that may be empty, to avoid a blank page, you can useemptytag to provide an alternative content:

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

Loop control:reversedwithsorted

AnQiCMS'forTags also supportreversedandsortedkeyword to change the order of traversal:

• {% for item in archives reversed %}Reverse traverse the set.
• {% for item in archives sorted %}Traverse the set after sorting it (for numbers or comparable strings).

cycleLabel: alternate display of styles or content.

cycleLabels allow you to output multiple predefined values in order during each loop iteration. This is very convenient when you need to apply alternating CSS classes to list items or cycle through 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 item'sclassIt willrow-aandrow-balternate.

Advanced techniques and precautions

combined useifandfor:Masteredif