How to elegantly handle empty list situations in AnQiCMS template using the `{% for ... empty ... %}` syntax?

In AnQiCMS template development, we often need to display a series of content lists, such as article lists, product lists, navigation menus, or friend links.However, these lists are not always filled with data. When a list is empty, how to elegantly inform the user that "there is no content here" instead of displaying a blank or error message, has become a detail to consider in template design.AnQi CMS is well-versed in this, drawing on the excellent design of Django templates in its powerful template engine developed in Go language, providing us with{% for ... empty ... %}This concise and practical syntax.

AnQiCMS as an enterprise-level content management system, its template engine design aims to provide high flexibility and ease of use.It adopts a syntax style similar to the Django template engine, making it easy for front-end developers to get started quickly.{{变量}}Refer to it, and logical control, such as conditional judgment and loop, is implemented through single curly brackets and the percent sign.{% ... %}Define. This clear syntax structure provides strong support for content presentation, while also ensuring the readability and maintainability of the code.

{% for ... empty ... %}The core of elegant handling of empty lists.

When processing a dynamic content list,forLoops are undoubtedly the most core tag. They allow us to iterate over an array or slice and other iterable objects, processing each element. A typicalforThe loop might look like this:

{% for item in archives %}
    <li>
        <a href="{{item.Link}}">{{item.Title}}</a>
        <p>{{item.Description}}</p>
    </li>
{% endfor %}

This code can render each item in the article list well. But the problem is that ifarchivesThis list happens to be empty, and the page will be empty, which greatly reduces the user experience. To avoid this situation, we usually add an extra one.ifCheck if the list is empty.

However, the Anqicms template engine provides a more elegant solution, which is to introduce in the{% for ... %}loop.{% empty %}Block. ThisemptyThe block's function is very intuitive: whenforThe list iterated by the loop is empty (i.e., there are no elements to iterate over) at the time, the content within the loop will not be executed, instead, it is replaced by{% empty %}The content in the block will be rendered. In this way, we can display a friendly prompt to the user when the list is empty.

Use{% for ... empty ... %}The syntax structure is as follows:

{% for item in archives %}
    <!-- 当archives列表有内容时，这里的内容会被重复渲染 -->
    <li>
        {{item.Title}}
    </li>
{% empty %}
    <!-- 当archives列表为空时，这里的内容会被渲染 -->
    <p>目前没有找到相关内容。</p>
{% endfor %}

This design makes the code intent clearer, also greatly reduces the redundant condition judgment in the template, making our template code more concise and easy to maintain, which is in line with the concept of AnQiCMS to provide a 'simple and efficient system architecture'.

Practice Case: Taking the document list as an example

Let's take the document list of Anqi CMS as an example to demonstrate in detail{% for ... empty ... %}The practical application. Suppose we want to display the latest articles on the website and give clear prompts when there are no articles. We can usearchiveListtags to retrieve document data.

<div class="article-list">
    {% archiveList latestArticles with type="list" limit="10" %}
        {% for article in latestArticles %}
        <div class="article-item">
            <h3 class="article-title"><a href="{{article.Link}}">{{article.Title}}</a></h3>
            <p class="article-meta">
                <span>发布时间：{{stampToDate(article.CreatedTime, "2006-01-02")}}</span>
                <span>浏览量：{{article.Views}}</span>
            </p>
            <p class="article-description">{{article.Description|truncatechars:120|safe}}</p>
            {% if article.Thumb %}
                <div class="article-thumb"><img src="{{article.Thumb}}" alt="{{article.Title}}"></div>
            {% endif %}
        </div>
        {% empty %}
        <div class="no-content-message">
            <p>抱歉，当前还没有任何文章内容，敬请期待！</p>
            <p>您可以稍后再来查看，或前往其他分类浏览。</p>
        </div>
        {% endfor %}
    {% endarchiveList %}
</div>

In this example:

1. We first use{% archiveList latestArticles with type="list" limit="10" %}The tag retrieves the most recent 10 articles from AnQiCMS and assigns the result tolatestArticlesVariable.
2. Then,{% for article in latestArticles %}The loop starts to try to iterate through these articles.
3. IflatestArticlesIf the list is not empty, then each one in the loop bodyarticle(Containing fields such as title, link, description, thumbnail, etc., and utilizingstampToDateFilter to format time,truncatecharsFilter to truncate description,safeFilter to prevent XSS) will be rendered as adiv.article-item.
4. While iflatestArticlesThe list is empty, then{% empty %}The content within the block will be activated, and a message will be displayed on the page saying "Sorry, there is no article content available at the moment, please wait!This friendly prompt, rather than a blank, greatly enhances the user experience.

A deeper understanding: Why chooseemptyblock

Without{% empty %}Before the block, we might handle an empty list like this:

{% archiveList latestArticles with type="list" limit="10" %}
    {% if latestArticles %} {# 先判断列表是否为空 #}
        {% for article in latestArticles %}
            <div class="article-item">
                <h3 class="article-title"><a href="{{article.Link}}">{{article.Title}}</a></h3>
                <p>...</p>
            </div>
        {% endfor %}
    {% else %} {# 如果为空，则显示提示信息 #}
        <div class="no-content-message">
            <p>抱歉，当前还没有任何文章内容，敬请期待！</p>
        </div>
    {% endif %}
{% endarchiveList %}

Although this piece of code can achieve the same effect, it is evident that,{% for ... empty ... %}The syntax is more concise and intuitive. It combines the two closely related logical units of 'traversal' and 'handling an empty list' naturally through a label structure, avoiding additionalif-elsenested.This not only improves the readability of the template code, but also reduces the possibility of errors, which is a reflection of AnQiCMS template engine's developer-friendly and content-display responsible design.

Summary

{% for ... empty ... %}Grammar is a powerful and considerate feature of AnQiCMS template engine, allowing website operators and template developers to handle the scenario of an empty list in a more elegant and efficient way.Through this mechanism, we can not only ensure that meaningful feedback is provided to users in any situation, improve the user experience, but also make the template code itself more concise and readable.Under the empowerment of AnQiCMS, your website content management will become more skillful, whether it is rich in content or has no data, it can show a professional and smooth side.

Frequently Asked Questions (FAQ)

1. This{% empty %}block supports in all{% for %}loop usage?Yes,{% empty %}block is{% for %}the standard component of the loop, can be used in any block of the Anqi CMS template engine supported.forUsed in loops, whether it is to iterate over article lists, category lists, tag lists, or any other iterable data collection.

2. If the list contains both content andnilvalue,{% empty %}Will it be triggered?No.{% empty %}The block is triggered onlyforWhen the entire list (or slice, array) being iterated over is itself "empty", for example, it is an empty list ornilIf the list contains elements (even if the values of these elements arenilor empty strings),forthe loop will still try to iterate over these elements,{% empty %}but the block will not execute.

3. BesidesarchiveListWhat are some scenarios suitable for use{% for ... empty ... %}? {% for ... empty ... %}Applicable to all list labels that may return an empty result set. For example, when usingnavListTo get the navigation list,tagListTo get the tag list,commentListTo get the comment list,linkListUse it in a loop when getting links{% empty %}To handle empty situations, ensuring the integrity and user experience of the page.