As an experienced website operations expert, I know that every detail in the presentation of website content can affect the user experience and the professional image of the website.Especially in the scenario of "data gap", how to avoid the page from looking stiff, blank, and even confusing to users is a task that requires careful design.categoryListHow to use tags cleverly when no category data is found.emptyCustomize friendly prompt information with tag blocks.

categoryListThe function of it versus the challenge of "empty".

In Anqi CMS,categoryListTags are a powerful tool for dynamically retrieving and displaying website category information (such as article categories, product categories, etc.) in templates. It allows us to accordingmoduleId(Model ID),parentIdParameters such as (parent category ID) are used to flexibly filter and render the required category list.

Generally, we will usefora loop to iteratecategoryListThe classification data obtained by the label and displayed on the web page. However, when certain conditions are met,categoryListIf no classification data that meets the conditions is found by the label, if only simpleforLoop, this area on the page will leave a blank space, which undoubtedly will bring a bad experience to the visitors, making them feel that the website content is incomplete, even mistakenly thinking it is a loading error.

The Anqi CMS fully considers this scenario and provides an elegant solution, that isforIn the loop:emptyLabel block.

for empty endforOn stage: Handling empty data elegantly

The template engine of Anqi CMS borrowed the syntax style of Django, inforintroducing in the loop.emptyThe cleverness of this tag block lies in the fact that it will only appear inforThe data collection to be traversed by the loop is empty (i.e., no iterable items are found). This means that,categoryListNo category data can be queried.emptyThe label block will appear, taking over the display logic of the page, allowing us to customize a prompt message instead of leaving a blank space.

Let's take a look at its basic structure:

{% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
        <!-- 这里是正常情况下，有分类数据时显示的内容 -->
        <li class="category-item">
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            <p>{{ item.Description }}</p>
        </li>
    {% empty %}
        <!-- 当没有找到任何分类时，这里的内容会被渲染 -->
        <div class="no-category-tip">
            <p>抱歉，目前没有找到任何分类信息。</p>
        </div>
    {% endfor %}
{% endcategoryList %}

In this code block,{% for item in categories %}and{% endfor %}the content between them will becategoriesrendered when there is data in the list. However,{% empty %}and{% endfor %}the content between them, will becategoriesThe list is rendered when empty. This way, we avoid the blankness of the page and provide valuable feedback to the user.

Customize your prompt information: make the empty page no longer 'empty'.

emptyThe strength of the label block lies in its customizability.We can not only place simple text prompts, but also combine HTML structures, even use other built-in tags of AnQiCMS, to create richer and more guiding prompt information.

  1. Simple text prompt:The most direct way is to inform the user of the current status, and the tone can be friendly.

    {% empty %}
    <p>我们正在努力更新中，暂无相关分类，请稍后再来。</p>
{% endfor %}

  2. Add HTML structure to improve readability:Usediv/p/h3Labels such as these can make prompt information more hierarchical and attract the user's attention.

    {% empty %}
    <div class="no-category-found-box">
        <h3>哎呀，这里空空如也……</h3>
        <p>我们正在积极整理内容，很快就会有新的分类上线！</p>
        <p>您可以探索网站其他区域，或许会有您感兴趣的内容。</p>
    </div>
{% endfor %}

  3. Combine with other labels to provide dynamic information:This is a commonly used skill by operation experts, utilizing the flexibility of CMS to make prompts more intelligent. For example, we can usesystemtags to obtain the website name, orcontactLabel to get contact information, guide the user to the next step.

    {% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
        <!-- ... 分类列表内容 ... -->
    {% empty %}
        <div class="empty-state-message">
            <p>当前区域暂无分类信息。</p>
            <p>建议您访问 <a href="/">{{ system with name="SiteName" }}</a> 首页，或通过站内搜索功能查找您感兴趣的内容。</p>
            <p>如有疑问，欢迎联系我们：<a href="tel:{{ contact with name="Cellphone" }}">{{ contact with name="Cellphone" }}</a></p>
        </div>
    {% endfor %}
{% endcategoryList %}

    In this example, when there is no category, the user will see a prompt containing the website name and contact phone number, which is both professional and practical.

  4. Guide admin operations (if applicable for backend templates):In some backend management interfaces or developer views,emptyblocks can also be used to prompt admins to create content.

    {% empty %}
    <div class="admin-tip">
        <p>当前模型下没有创建任何分类。赶紧去 <a href="/system/category/create">创建您的第一个分类</a> 吧！</p>
    </div>
{% endfor %}

    Of course, the aforementioned/system/category/createThe path is for demonstration purposes, the actual path needs to be determined according to your AnQiCMS backend routing.

Enhancing user experience: Details determine success or failure.

Handle properly.categoryListThe empty data state, it's not just to avoid a blank page, it is also a key part to improve user experience and maintain the professional image of the website. A well-designed "empty" state prompt can:

  • Reduce user confusion:Clearly inform the user that there is no content currently, rather than making them guess if the page has failed to load.
  • Guide user behavior:Encourage users to continue exploring the website by providing navigation links, a search box, or contact information, rather than leaving directly.
  • Maintain the brand tone:Even an "empty" page can convey the brand's professionalism and warmth through friendly copywriting and design.

In short, the Anqi CMS'semptyThe label block provides a very flexible and powerful mechanism to deal withcategoryListMay be the state of no data. As website operators, we should make full use of this feature to transform potential 'blankness' into opportunities to enhance user experience and website value.

Common Questions (FAQ)

  1. Q:emptyLabel block andif categoriesWhat is the difference?A:{% for ... %}{% empty %}{% endfor %}Structure isforLoop-specific, it is executed when the loop data is emptyemptyblock.{% if categories %}Need to be written extra.forLoop and{% else %}Block to handle empty cases.emptyLabel block makes the code structure more concise, the intention clearer, and is a **practice** when handling loop empty data.

  2. Q: Can IemptyDo you use other template tags of AnQiCMS in the label block?A: Of course you can.emptyThe tag block can contain any valid HTML structure, CSS styles, and other template tags provided by AnQiCMS (such assystem/contactPlease use parentheses ( etc.), so that you can create richer and more dynamic prompt information.

  3. Q: IfcategoryListThe label itself has an incorrect parameter,emptyWill the block still be executed?A: IfcategoryListThe parameter of the label causes the query to fail (for examplemoduleIdIt does not exist), which usually leads to template rendering errors rather than returning an empty list.emptyThe block only works whencategoryList Executed successfully but the result set is emptyin cases will trigger. For system-level issues caused by parameter errors, you need to check the logs or error information in the AnQiCMS background.