As an experienced website operations expert, I am well aware that the fine-grained user experience is crucial in content management and website presentation.A well-designed website that not only provides rich content but also maintains elegance and usability when content is missing.This is a basic and key skill in front-end template design: how to effectively judge whether the list data is empty and flexibly display content.In AnQiCMS, we take advantage of its powerful and easy-to-use Django template engine syntax, which can beautifully achieve this.

Today, let's delve into how to use templates in the Anqi CMS.ifTags, combinedarchiveList/categoryListCheck if the list tags are empty, and build a more intelligent and user-friendly content display accordingly.

Understanding the 'empty' concept in the AnQi CMS template

In the template system of Anqi CMS,ifTags are the core tools for conditional judgment. They can not only judge boolean values,trueorfalse），还能聪明地识别其他变量的“真值”（truthy）和“假值”（falsey）。对于我们讨论的列表空判断，这个特性尤为实用：

  • Empty string ("")Is considered as "false value".
  • Number zero (0)Is considered as "false value".
  • nilornothing(Empty object)Is considered as "false value".
  • Empty array or empty slice ([])This will also be considered as a 'falsy value'.

This means, when a list variable (such as one obtained through a)archiveListorcategoryListlabel) is empty, it inifTags' judgment will be regarded as 'false value', otherwise as 'true value'.

UseifList empty judgment of tags

The most direct way is to combineifTags andnotOperator to determine if a list is empty.When you want to display a series of articles or categories in a certain content area but are not sure if there is any data, this method can well control the presentation of the content.

Let us takearchiveListFor example, suppose you want to display the latest 5 articles on the homepage. If there are no articles, you may want to display a prompt message instead of a blank area.

{% archiveList latestArticles with limit="5" order="id desc" %}
    <div class="latest-news-section">
        {% if not latestArticles %}
            <p>抱歉，当前没有任何最新文章。</p>
        {% else %}
            <h3>最新动态</h3>
            <ul>
                {% for article in latestArticles %}
                    <li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
{% endarchiveList %}

In the above code snippet, we first usearchiveListLabel obtained the latest 5 articles and assigned them tolatestArticlesvariable. Next,{% if not latestArticles %}it will checklatestArticlesIs it empty.If empty (i.e., no articles have been retrieved), it will display "Sorry, there are no latest articles available at the moment.This hint.If there is an article, the article title list will be displayed normally.

Similarly, forcategoryList, if you want to display the top-level categories of the website and handle the case where the category is empty:

{% categoryList topCategories with parentId="0" limit="5" %}
    <nav class="main-category-nav">
        {% if topCategories %}
            <h4>热门分类</h4>
            <ul>
                {% for category in topCategories %}
                    <li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
                {% endfor %}
            </ul>
        {% else %}
            <p>目前没有设置任何顶级分类，请在后台添加。</p>
        {% endif %}
    </nav>
{% endcategoryList %}

Here,{% if topCategories %}directly checktopCategoriesDoes it contain data. This writing is very intuitive, which can help us dynamically adjust the page structure according to the data status and enhance the user experience.

A more elegant way: utilizingfor...emptystructure

For the scenario of traversing a list while handling the case of an empty list, the template engine of Anqi CMS provides a more concise and elegant built-in structure: Englishfor...empty...endforThis structure is specially designed for list traversal, and it will automatically execute when the list is emptyemptyThe content within the block, avoiding additionalif...elsejudgment.

Let's usefor...emptythe structure to rewrite the latest article example above

{% archiveList latestArticles with limit="5" order="id desc" %}
    <div class="latest-news-section">
        <h3>最新动态</h3>
        <ul>
            {% for article in latestArticles %}
                <li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
            {% empty %}
                <li><p>抱歉，当前没有任何最新文章。</p></li>
            {% endfor %}
        </ul>
    </div>
{% endarchiveList %}

You see, has the code become more concise?{% for article in latestArticles %}Will try to traverselatestArticleslist. If this list has content, it will execute normallyforthe loop body; if the list is empty, then{% empty %}and{% endfor %}The content between here would be rendered, perfectly achieving the prompt for an empty list.

Let's take a look atcategoryListan example:

{% categoryList productCategories with moduleId="2" parentId="0" %}
    <nav class="product-category-nav">
        <h4>产品分类</h4>
        <ul>
            {% for category in productCategories %}
                <li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
            {% empty %}
                <li><p>暂无产品分类信息，请尽快完善。</p></li>
            {% endfor %}
        </ul>
    </nav>
{% endcategoryList %}

Thisfor...emptyThe pattern, when dealing with list data, not only makes the code more concise, but also more in line with the 'content is service' concept, making the template logic clearer.

Considerations and **practice in actual application

In the actual operation of websites,巧妙地运用这些空判断技巧，能带来多方面的益处：can bring various benefits by skillfully using these empty judgment techniques:

  1. Enhance user experience:Avoid users from seeing an empty page or broken layout. A clear 'No content available' prompt is more guiding than whitespace.
  2. Optimize SEO:Reduce the generation of "thin content" pages.If a list page has very little content due to missing data, search engines may consider it a low-quality page.At least some text content on the page can be guaranteed by providing friendly prompts.
  3. Increase template reusability:An adaptable template can fit various scenarios with or without data, reducing development and maintenance costs.
  4. Enhance code readability:Especiallyfor...emptyIt clearly expresses the intention of 'If the list has content, traverse it; otherwise, display this', making team collaboration more efficient.

A small hint:To make the HTML output by the template cleaner, avoid extra blank lines, you caniforforadd hyphens on both sides of the tag-for example{%- if condition -%}This will tell the template engine to remove the tag itself and the surrounding whitespace, thereby generating more compact HTML.

Mastered the use of the structure in Anqi CMS templates.ifTags andfor...emptyYou can sail through.