How to flexibly control the display logic of conditional judgment and loop control tags?

Building dynamic and interactive websites in Anqi CMS requires precise control over content display logic. Among these, conditional judgments (if）and loop control（forThe tag plays a core role.They are like a powerful 'combination punch', making the template no longer a static layout, but one that can intelligently respond and flexibly present content based on data changes.

The template syntax of AnQi CMS is based on the Django template engine, its concise and efficient markup makes it easy for beginners to quickly start with template development.Understand and make good use of these tags, and you will be able to greatly enhance the expressiveness and user experience of the website content.

Condition judgment label: Build intelligent display rules

Condition judgment label, namely{% if ... %}Series tags, allowing us to determine in the template which content should be displayed and which should be hidden.This is particularly important for the implementation of personalized and customized content display.

The basic usage is to determine whether a variable or expression is true. For example, if a document has a thumbnail, we want it to be displayed, otherwise not:

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

here,archive.ThumbIf it exists and has a value, the condition is true, and the image will be rendered. Ifarchive.Thumbit is empty, this code will be ignored, and no blank space will be left on the page.

The condition judgment can be refined into various cases, through{% elif ... %}(otherwise if) and{% else %}(Otherwise) to handle. For example, when displaying navigation links in a loop, we may need to add different styles depending on whether the link is the current page:

{% navList navs %}
  {% for item in navs %}
    <li class="{% if item.IsCurrent %}active{% else %}normal{% endif %}">
      <a href="{{item.Link}}">{{item.Title}}</a>
    </li>
  {% endfor %}
{% endnavList %}

In this example,item.IsCurrentIt is a boolean value, if the current navigation item is the page the user is visiting, it is set totruetherefore for<li>tagsactivethe class name.

Moreover, we can also make comparisons for numbers, strings, etc., such as determining if the document ID is a specific value, or comparing loop counters to achieve differentiated display:

{% if archive.Id == 10 %}
  <p>这是ID为10的特别推荐文章！</p>
{% elif archive.Views > 1000 %}
  <p>这是一篇阅读量超过1000的热门文章。</p>
{% else %}
  <p>这是一篇普通文章。</p>
{% endif %}

The flexibility of conditional judgment lies in its ability to perform boolean operations, numerical comparisons, string matching, and more on any accessible variable properties, which is an indispensable tool for controlling the logic of content display.

Loop control label: mass display and customization

Loop control label, that is{% for ... in ... %}The tag is a powerful tool for handling list-like data. It can iterate over each element in an array or slice, and execute the same block of code for each element, thereby efficiently displaying article lists, category lists, navigation menus, image groups, and more.

For example, display the website's navigation list:

{% navList navs %}
  <ul>
    {% for item in navs %}
      <li><a href="{{item.Link}}">{{item.Title}}</a></li>
    {% endfor %}
  </ul>
{% endnavList %}

Inside the loop,itemThe variables will represent in turnnavsEach navigation item in the list, we can render its content throughitem.Linkanditem.Titlewith properties such as.

forThe loop also provides several very useful built-in variables, such asforloop.Counter(The current loop index, starting from 1) andforloop.Revcounter(The reverse index of the current loop). This is very convenient for implementing item numbering, odd and even row styles, or distinguishing between first and last elements:

{% archiveList archives with type="list" limit="5" %}
  {% for item in archives %}
    <li class="{% if forloop.Counter is divisibleby 2 %}even{% else %}odd{% endif %}">
      <span>{{ forloop.Counter }}. </span><a href="{{item.Link}}">{{item.Title}}</a>
    </li>
  {% endfor %}
{% endarchiveList %}

If the list may be empty,{% empty %}the tag provides a graceful way to handle this situation, rather than displaying a blank page or error message:

{% archiveList archives with type="list" categoryId="999" limit="10" %} {# 假设分类999不存在或无内容 #}
  {% for item in archives %}
    <li><a href="{{item.Link}}">{{item.Title}}</a></li>
  {% empty %}
    <li>目前该分类下暂无文章。</li>
  {% endfor %}
{% endarchiveList %}

This avoids the trouble of an additional judgment of whether the list is empty in the business logic layer, allowing the template to focus more on content display.forTags also supportreversedandsortedThe modifier is used to traverse in reverse or sort by a specific rule, further enhancing the flexibility of data display.

Combined use: to achieve complex display logic

ifandforThe power of tags lies in their flexibility to combine and build display logic that meets complex business needs. For example, in a multi-level navigation menu, we may need to determine whether a main menu item has a submenu, and if so, we may need to display the submenu again, and even in the submenu, we may need to determine whether there is a corresponding article list:

”`twig {% navList navList with typeId=1 %} {# 假设typeId=1是主导航 #}

{% for mainItem in navList %}
  <li>
    <a href="{{ mainItem.Link }}">{{ mainItem.Title }}</a>
    {% if mainItem.NavList %} {# 判断主菜单是否有子菜单 #}
      <ul class="sub-menu">
        {% for subItem in mainItem.NavList %}
          <li>
            <a href="{{ subItem.Link }}">{{ subItem.