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

How to present information in a richer and more attractive way during website content operation is the key to improving user experience and site activity.AnQiCMS (AnQiCMS) provides us with the tools we need to achieve this goal with its flexible content model and powerful template engine, among which,forThe looping tag is the essential core tool for us to perform diverse typesetting and display.

Imagine, your website is not just a static pile of articles, but can intelligently present article lists, product albums, categorized navigation, user comments, and even custom parameters based on different scenarios.forLoop tags in Anqi CMS are the foundation for implementing these dynamic displays.

Master data flexibility, starting with the basic list.

The Anqi CMS template engine uses syntax similar to Django, which makes it very intuitive for content developers to manipulate data. When we talk aboutforLoops, 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 usearchiveListTag to retrieve data set and then cooperateforLoop 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 block,articlesIs a collection containing multiple articles.forLoop through each one of themarticleObject, we can thenarticle.Title/article.LinkBy using these properties to access and format the detailed data of each article, this method makes our content display effortless. Whether it's a simple text list or a card layout with pictures, it can be easily realized.

Build a hierarchical structure, create intelligent navigation and content aggregation

The website's navigation and classification is an important way for users to find content. Anqi CMS'scategoryListLabel combinationforLoops can help us build multi-level category navigation, and even directly display related content within categories.

Assuming we need to display product categories, and there may be subcategories under each category, we can handle it 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 %}

Through this nestedforLoop structure, we can not only clearly show the classification level of the website, but also, when necessary, 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 building a more intelligent and interactive content aggregation area.

Details determine experience: personalized processing in the loop

forThe power of loops goes beyond this, as they also have many built-in variables and functions to help us control each element in the loop more finely, thus achieving diverse layout and display effects.

• forloop.Counterandforloop.RevcounterThese two variables can be used to obtain the current loop index (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 implement alternate row coloring effects, etc.

  {% 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 %}
  

• emptyTagWhen the data set is empty, we may not want the page to display a blank space, but to show a friendly prompt message instead.emptyThe label 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 certain properties of the data.For example, images are displayed only when the article has a thumbnail, or different buttons are displayed according to the product status.“`twig {% archiveList products with type=“list” limit=“4” %}

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