When using Anqi CMS to build a website, we often need to display lists of articles, products, or other content. These lists are usually displayed througharchiveListThis template tag is used to dynamically retrieve and render.However, if a list is empty due to various reasons (such as a lack of content under a category, or empty search results, etc.), the user experience on the page will be greatly reduced if it is just empty.archiveListHow should we display a friendly default prompt when the article list is empty?

The AnQi CMS built-in template engine (based on Django template syntax) provides a very concise and powerful mechanism to handle this situation, that isforin the loop{% empty %}Block. This feature allows us to easily define the content displayed when the list has no data, thus optimizing the user experience.

archiveListLabel overview

First, let's briefly review.archiveListLabel. It is a very flexible label used to query and display a list of articles from a database. By setting different parameters, such asmoduleId(Model ID),categoryId(Category ID),limit(show quantity) as welltype(List type, such as pagination or regular list), you can accurately control which articles to retrieve.For example, you can get the latest articles under a certain category, or a list of articles with specific recommended attributes.

An elegant solution:{% empty %}block

WhenarchiveListAfter the tag gets the data, we usually use{% for item in archives %}such a structure to iterate through and display the detailed information of each article. And{% empty %}It is a blockforThe partner of the loop, it will beforLoop through the list (for examplearchiveListTagging for obtainingarchivesVariable) is executed and displayed when there is no data. In other words, ifarchivesthe variable is empty, then{% for %}and{% endfor %}The content between (i.e., the normal article list) will not be rendered, instead, it will be replaced with{% empty %}and{% endfor %}The content between.

This makes the logic of handling empty lists very intuitive and simple, without the need for additional conditional judgments, and the code is also more concise.

How to implement: code example

Assuming you are displaying an article list in a template, you can use it like thisarchiveListand{% empty %}To ensure that a prompt is displayed even when there are no articles

{# 假设这里是某个文章列表的模板区域 #}
<div class="article-list-container">
    {% archiveList articles with type="page" limit="10" %} {# 获取最新的10篇文章，如果当前在分类页或搜索页，则自动根据上下文获取 #}
        {% for item in articles %}
            {# 如果列表有内容，这里会循环显示每篇文章的详情 #}
            <div class="article-item">
                <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
                <p>{{item.Description}}</p>
                <span>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>浏览量：{{item.Views}}</span>
            </div>
        {% empty %}
            {# 如果列表为空，这里的内容就会被显示 #}
            <div class="empty-list-message">
                <p>抱歉，当前列表暂时没有找到任何文章。</p>
                <p>您可以尝试调整筛选条件，或访问<a href="/">网站首页</a>获取更多内容。</p>
            </div>
        {% endfor %}
    {% endarchiveList %}
</div>

In this code block:

  • {% archiveList articles with type="page" limit="10" %}This is the tag to get the list of articles, we will assign the obtained article data toarticlesVariable.
  • {% for item in articles %}The standard loop structure, used to iteratearticlesEach article in it.
  • Within the loop: When there are articles, it will render the title, description, publish time, and view count of each article.
  • {% empty %}: This is the key! IfarticlesThe list is empty, thenforThe content inside the loop will be skipped and executed directly{% empty %}.
  • {% endfor %}and{% endarchiveList %}: meansforloop andarchiveListEnd of tag.

Custom prompt content

{% empty %}The strength of the block lies in the fact that you can place any HTML content in it, not just simple text. This means you can:

  1. Display friendlier text promptsFor example, 'Alas, I couldn't find the content you were looking for!' or 'There are no articles in this category, please look forward to them!'
  2. Add guiding operationsFor example, provide a search box to suggest other keywords to the user; or display some popular articles and recommended content to guide the user to continue browsing.
  3. 美化提示样式Add CSS styles to the prompt information to keep it consistent with the overall design style of the website, and even add small icons or animations to make the prompt more vivid and interesting.

For example, you can customize the prompt like this:

            <div class="empty-list-message">
                <p><i class="icon-info"></i> 当前没有找到相关内容。</p>
                <p>您可以试试：</p>
                <form action="/search" method="get">
                    <input type="text" name="q" placeholder="输入关键词搜索...">
                    <button type="submit">搜索</button>
                </form>
                <p><a href="/category/hot-articles" class="btn btn-primary">查看热门文章</a></p>
            </div>

Application scenarios and versatility

This{% empty %}The use of the block is not limited toarchiveListTags, other tags used for list display in AnQi CMS, such astagList(Document tag list),commentList(Comment list),categoryList(Category list) etc., also support similar functions,{% for ... empty ... endfor %}Syntax structure. This means you can apply this concise and efficient solution in any scenario where you need to loop through data but are concerned about it being empty.

By simply inarchiveListlabel'sforLoop added{% empty %}A block, and we can easily deal with the case where the article list is empty, ensuring that the website can always provide users with a friendly and complete page content, thereby significantly improving the user experience.

Frequently Asked Questions (FAQ)

  1. Question:{% empty %}Does the block affect the page performance?Answer: No.{% empty %}The block is a logical judgment of the template engine, only when it corresponds to theforWhen the list being traversed is indeed empty, its content will be rendered to the page. This will not add any additional load to the page, but can handle the case of no data more efficiently.

  2. Ask: Can I display{% empty %}other recommended content or nest otherarchiveListTag?Answer: Absolutely.{% empty %}The block can contain any valid HTML or other template tags. You can nest anotherarchiveListLabel to display hot articles, the latest released content, or insert a search form to guide users to explore more information.Please note that when nesting, make sure the logic is clear, avoid infinite loops, or unnecessary complexity.

  3. Ask: If my template does not have{% empty %}block, whenarchiveListwhat will happen if it returns empty data?Answer: If there is no{% empty %}block andarchiveListThe data returned is empty, then{% for %}Any content inside the loop will not be rendered.The corresponding area of the page will display as blank or missing content.{% empty %}How to handle an empty list situation.