As an experienced website operations expert, I know that meticulous 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.How can you effectively judge whether the list data is empty and display content accordingly, which is a basic and key skill in front-end template design.In AnQiCMS, we make use of its powerful and easy-to-use Django template engine syntax to achieve this elegantly.

Today, let's delve into how to use the Anqi CMS templateifTags, combined witharchiveList/categoryListlist tags, check if the data is empty, and build a more intelligent and friendly content display accordingly.

Understand the concept of 'empty' in 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)，can cleverly identify the 'truthy' and 'falsey' of other variables. This feature is especially useful for the list empty judgment we are discussing:

  • An empty string ("")It is considered a 'falsy value'.
  • Number zero (0)It is considered a 'falsy value'.
  • nilornothing(empty object)It is considered a 'falsy value'.
  • Empty array or empty slice ([])is also considered a 'falsy value'.

This means that when a list variable (such as througharchiveListorcategoryListthe tag results) is empty, it is considered a “falsy value” in theiftag’s evaluation, otherwise it is considered a “truthy value”.

UseifCheck if the list label is empty

The most direct way is to combineifwith the tag andnotThe operator 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 control the presentation of content well.

Let's takearchiveListFor example, if 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 usearchiveListThe label fetched the latest 5 articles and assigned them tolatestArticlesthe variable. Then,{% if not latestArticles %}it will checklatestArticlesIs it empty. If it is empty (i.e., no articles have been retrieved), it will display 'Sorry, there are no latest articles available at the moment.')This is a hint. If there is an article, the list of article titles will be displayed normally.

Similarly, forcategoryListIf you want to display the top-level categories of the website and handle the case where the categories are 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 %}check directlytopCategoriesDoes it contain data. This format is very intuitive and can help us dynamically adjust the page structure based on the data status, improving the user experience.

A more elegant way: utilizingfor...emptystructure

For the scenario of iterating over a list while handling an empty list, the Anqi CMS template engine provides a more concise and elegant built-in structure: for...empty...endforThis structure is specially designed for list traversal, and it will automatically execute when the list is empty.emptyThe content in the block avoids additional.if...elsejudgment.

Let's usefor...emptystructure 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 %}

Look, isn't the code becoming more concise?{% for article in latestArticles %}It will try to traverselatestArticlesthe list. If this list has content, it will execute normallyforthe loop body; if the list is empty, then{% empty %}and{% endfor %}The content between will be rendered, perfectly realizing the prompt when the list is empty.

Let's seecategoryListExample:

{% 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 conforms to the concept of 'Content as a Service', making the template logic clearer.

Considerations and **practice in practical applications

In the operation of actual websites,巧妙地运用 these null judgment techniques can bring various benefits:

  1. Improve user experience:Avoid users from seeing an empty page or broken layout. A clear 'No content available' prompt is more guiding than leaving it blank.
  2. Optimize SEO:Reduce the generation of "thin content" pages. If a list page is almost empty due to missing data, search engines may consider it a low-quality page.By providing friendly prompts, it can at least ensure that the page has some text content.
  3. Improve template reusability:A template can adapt to various scenarios with or without data, reducing development and maintenance costs.
  4. Enhance code readability: Especially,for...emptyThe structure clearly expresses the intention of "if the list has content, traverse it, otherwise display this", making team collaboration more efficient.

A little tip:In order to make the output HTML of the template cleaner, to avoid extra blank lines, you can add dashes on both sides of theiforfortags (-), for example{%- if condition -%}This will tell the template engine to remove the tag itself and its surrounding whitespace, thus generating a more compact HTML.

Mastered the AnQi CMS template inifTags andfor...emptyBy using the structure, you can play