How to implement diverse data layout and display with the `for` loop iteration tag in Anqi CMS?

How to present information in a more rich and attractive way in the operation of website content, which is the key to improving user experience and site activity level.AutoCMS (AutoCMS) offers us the tools we need to achieve this goal with its flexible content model and powerful template engine.forThe looping traversal tag is an indispensable core tool for us to perform diverse layout and display.

Imagine that your website is not just statically piled up with articles, but can intelligently present article lists, product albums, category navigation, user comments, and even custom parameters according to different scenarios.forLoop tags in the Anqi CMS are the foundation for realizing these dynamic displays.

Governing data flexibly, starting from the basic list.

The template engine of AnQi CMS adopts syntax similar to Django, which allows content developers to operate data very intuitively. When we talk aboutforLooping, the most direct application is to traverse a set of data and display it one by one.

For example, to display the latest list of articles on a page, we can usearchiveListLabel gets the data set, then cooperatesforLoops to present the title, link, introduction, and thumbnail information of each article one by one.

{% archiveList articles with type="list" limit="5" %}
    <div class="latest-articles">
        {% for article in articles %}
            <div class="article-item">
                {% if article.Thumb %}<img src="{{ article.Thumb }}" alt="{{ article.Title }}" class="article-thumb">{% endif %}
                <h3 class="article-title"><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
                <p class="article-description">{{ article.Description }}</p>
                <span class="article-date">发布时间：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
            </div>
        {% endfor %}
    </div>
{% endarchiveList %}

In this code,articlesIs a collection that contains multiple articles.forLoop through each onearticleOnce we have the objectarticle.Title/article.LinkUsing properties to access and format the detailed data of each article.This way makes our content display effortless, whether it's a simple text list or a richly illustrated card layout, it can be easily realized.

We can build a hierarchical structure, creating intelligent navigation and content aggregation

The navigation and categorization of the website are important ways for users to discover content. The Anqi CMS iscategoryListTag combinationforLoops can help us build multi-level classification navigation, even displaying related content directly under the classification.

We need to display product categories, and there may be subcategories under each category, which can be handled flexibly like this:

{% categoryList mainCategories with moduleId="2" parentId="0" %}
    <ul class="main-category-nav">
    {% for category in mainCategories %}
        <li>
            <a href="{{ category.Link }}">{{ category.Title }}</a>
            {% if category.HasChildren %}
                {# 如果有子分类，则再次循环展示 #}
                {% categoryList subCategories with parentId=category.Id %}
                    <ul class="sub-category-nav">
                    {% for subCategory in subCategories %}
                        <li><a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a></li>
                    {% endfor %}
                    </ul>
                {% endcategoryList %}
            {% endif %}
        </li>
    {% endfor %}
    </ul>
{% endcategoryList %}

By this nestedforLoop structure, we can not only clearly show the classification level of the website, but also, according toitem.HasChildrenThis conditional judgment determines whether to further load and display subcategories, or directly display part of the documents under the category next to it, thereby constructing a more intelligent and interactive content aggregation area.

Details determine the experience: personalized processing in the loop

forThe power of loops goes beyond this, as they also come with many built-in variables and features that help us have finer control over each element in the loop, thereby achieving diverse layout and display effects.

• forloop.Counterandforloop.RevcounterThese two variables can separately obtain the index of the current loop (starting from 1) and the number of remaining elements.We can use them to add special styles to the first element of the list, or to implement effects such as alternating row colors.

  {% archiveList articles with type="list" limit="5" %}
      <div class="article-list-with-numbers">
      {% for article in articles %}
          <div class="article-item {% if forloop.Counter == 1 %}is-highlighted{% endif %}">
              <span class="item-number">{{ forloop.Counter }}.</span>
              <a href="{{ article.Link }}">{{ article.Title }}</a>
          </div>
      {% endfor %}
      </div>
  {% endarchiveList %}
  

• emptytagsWhen the data set is empty, we may not want the page to show a blank space, but to display a friendly prompt message instead.emptyTags can elegantly handle this situation.

  {% archiveList emptyArticles with type="list" categoryId="999" %} {# 假设此分类下无文章 #}
      {% for article in emptyArticles %}
          ...
      {% empty %}
          <p class="no-content-tip">很抱歉，当前分类暂无文章内容。</p>
      {% endfor %}
  {% endarchiveList %}
  

• ifConditional judgmentIn the loop, we often need to decide how to display based on some attributes of the data.For example, only display the image when the article has a thumbnail, or display different buttons according to the product status.

  <div class="product-cards">
  {% for product in products %}
      <div class="product-card">
          {%