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 where data is "missing", how to avoid making the page look stiff, blank, and even confusing to users is a task that requires careful design.Today, let's delve into the Anqi CMScategoryListHow to use tags creatively when no category data is foundemptyTo customize friendly prompt information with tag blocks

categoryListThe challenge of the 'empty' tag usage

In AnQi CMS,categoryListTags are a powerful tool that allows us to dynamically retrieve and display website classification information (such as article categories, product categories, etc.) in templates. It enables us to base onmoduleId(Model ID),parentId(Parent category ID) and other parameters, flexibly filter and render the required category list.

Generally, we would useforto loop throughcategoryListThe category data obtained by the tag is displayed on the web page. However, under certain conditions,categoryListIf only simple labels are used when no matching category data is found,forThe loop, the area on the page will leave a blank space, which undoubtedly will bring a bad experience to the visitor, making them feel that the website content is incomplete, and even mistake it for a loading error.

AnQi CMS fully considers this scenario and provides us with an elegant solution, that isforin the loopemptytag blocks.

for empty endforOn stage: gracefully handle null data

The AnQi CMS template engine borrows the syntax style of Django, inforintroduced in the loopemptylabel block. The cleverness of this label block lies in the fact that it will only be displayed inforThe loop will only be executed when the data set to be traversed is empty (i.e., no iterable items are found). This means that whencategoryListNo category data can be found.emptyThe label block will appear, taking over the page display logic, 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 betweencategoriesis rendered when there is data in the list. While{% empty %}and{% endfor %}the content betweencategoriesThe list is rendered only when it is empty. In this way, we avoid the emptiness 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 tag 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, with a friendly tone.

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

  2. Add HTML structure to enhance readability:Usediv/p/h3Tags can make prompt information more hierarchical and attract users' attention.

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

  3. Combine other tags to provide dynamic information:This is a skill commonly used by operation experts, taking advantage of the flexibility of CMS to make prompts more intelligent. For example, we can usesystemtags to get the website name, orcontactLabel to obtain 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 administrators 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 an example, the actual path should be determined according to your AnQiCMS backend routing.

Enhancing user experience: Details determine success or failure

Handle properlycategoryListThe empty data state is not just about avoiding blank pages on the page, it is also a key factor in improving user experience and maintaining the professional image of the website. A carefully designed 'empty' state prompt can:

  • Reduce user confusion:Clearly inform the user that there is no content at the moment, rather than letting them guess whether 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 professionalism and warmth of the brand through friendly copy and design.

In short, the Anqi CMS'semptyThe tag block provides a very flexible and powerful mechanism to deal with.categoryListA state of no data may occur. As a website operator, we should make full use of this feature to transform potential 'blanks' into opportunities to enhance user experience and website value.

Frequently Asked Questions (FAQ)

  1. Q:emptyLabel block andif categoriesWhat is the difference?A:{% for ... %}{% empty %}{% endfor %}The structure isforThe loop is unique, it executes when the loop data is emptyemptyblock. And{% if categories %}Need to be written extraforloop and{% else %}Block to handle empty cases.emptyLabel block makes the code structure more concise, the intention clearer, and is a practice when dealing with loop empty data.

  2. Q: Can IemptyDo you use other AnQiCMS template tags in the tag 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/contactwait,so that you can create richer and dynamic prompt information.

  3. Q: IfcategoryListThe parameter of the tag itself is incorrect,emptyWill the block still be executed?A: IfcategoryListThe parameters of the tag cause the query to fail (for examplemoduleIdDoes not exist, this usually leads to template rendering errors rather than returning an empty list.emptyA block only whencategoryList Executed successfully but the result set is empty.It will trigger in such a case. For system-level issues caused by parameter errors, you need to check the logs or AnQiCMS backend error information.