How to display a preset default value (such as "No data") for empty variables in the template?

In website operation, the completeness of content display and user experience is crucial.When we call data in AnQiCMS (AnQiCMS) template, we sometimes encounter the situation where some variables are empty.If these empty variables are not processed, the front-end page may appear blank areas, 'null' text, and even cause layout chaos, thus affecting the professionalism of the website and the user's browsing experience.This article will discuss in detail how to elegantly display default values for empty variables in the Anqi CMS template, such as 'No data available'.

AnQi CMS uses a template engine syntax similar to Django, which provides us with powerful content control capabilities. In the template, we use double braces{{变量名}}Output the value of the variable, by{% 标签 %}Use various template tags and logical controls. To set a default value for a variable, we can cleverly utilize its built-in filter function.

Core solution: Flexible applicationdefaultFilter

defaultThe filter is the most direct and commonly used method for handling empty variables. Its function is, if a variable is empty (includingnilan empty string""numbers0and a boolean valuefalseValues considered 'false' will output our preset default value; otherwise, it will output the value of the variable itself.

Its basic usage is very simple:

{{ 变量名 | default:"你的默认值" }}

Let's look at several common scenarios to see how to apply it:

1. Default value of text content

Suppose we want to display the article description on the document detail pagearchive.DescriptionIf an article does not have a description filled in, we do not want to see a blank space but instead display 'No Introduction Available'.

{# 假设archive.Description可能为空 #}
<p>文章简介：{{ archive.Description | default:"暂无简介" }}</p>

{# 如果是自定义字段，例如author #}
<p>作者：{% archiveDetail with name="author" | default:"佚名" %}</p>

In this example, ifarchive.DescriptionIf there is content, it will display its content; if it is empty, it will display 'No introduction available'. Similarly, if it passes througharchiveDetailCustom field called by the tagauthorIf it is empty, it will display 'Unknown'.

2. Default image link

Images are an important part of a website's content. If the image link variable is empty, the browser may display a broken image icon, which greatly affects the aesthetics.We can set a placeholder as the default value.

{# 假设archive.Logo（封面首图）可能为空 #}
<img src="{{ archive.Logo | default:"/static/images/placeholder.png" }}" alt="{{ archive.Title | default:"图片" }}" />

{# 或者分类的缩略图 #}
<img src="{% categoryDetail with name="Thumb" | default:"/static/images/default_category.png" %}" alt="{% categoryDetail with name="Title" | default:"分类图片" %}" />

Here, ifarchive.LogoorcategoryDetailofThumbIf the variable has a value, display the corresponding image; if it is empty, it will display/static/images/placeholder.pngor/static/images/default_category.pngThis default placeholder image. At the same time, for SEO and accessibility,altIt is also best to set a default value for properties.

3. Default value for numbers or statistical data.

For some statistical data, such as the number of page views of articles.archive.ViewsIf its value is 0 or empty, we usually want to display '0 reads' or 'No data available.'

<p>浏览量：{{ archive.Views | default:"0" }} 阅读</p>

Advanced Application: Understandingdefault_if_noneThe difference between filters

exceptdefaultFilter, Anqi CMS also providesdefault_if_noneFilter. The main difference between the two lies in the definition of 'empty':

  • default: When the variable isnilan empty string""numbers0and a boolean valuefalseand other values are considered 'false', the default value will be applied.
  • default_if_none: It is only applied when the variable is strictlynil(Null pointer) applies the default value. If the variable is an empty string""or0but notnil,default_if_nonewill not take effect.

in most cases,defaultThe filter is sufficient to meet the needs. But if you have a stricter definition of the 'empty' state of a variable, for example, if you think a clear0It is a valid value, not a case where a default value is needed, but only when the variable does not exist (nil) then a default value is needed, sodefault_if_noneWould be a better choice.

{# 假设某个自定义字段price可能为nil，但0是一个有效价格 #}
<p>价格：{{ archive.price | default_if_none:"面议" }}</p>

Combine conditional judgmentiftags to implement more complex logic

Sometimes, merely displaying a default value may not be enough to express the logic we want.We may need to display a completely different HTML structure based on whether the variable exists.This can be combinedifLogical judgment label.

{% if archive.Content %}
    {# 如果文章内容存在，显示完整内容 #}
    <div class="article-content">
        {{ archive.Content | safe }}
    </div>
{% else %}
    {# 如果文章内容为空，显示一个提示块 #}
    <div class="no-data-box">
        <p>抱歉，当前文章内容缺失，您可以查看其他相关文章。</p>
        <a href="/category/related-articles">查看相关</a>
    </div>
{% endif %}

This method provides greater flexibility, allowing the page structure and prompt information to be dynamically adjusted according to the actual state of the variable, thereby providing a more intelligent user experience.

**Practice and Precautions

  1. Uniform default value style: Use a consistent default value for empty data of the same type throughout the website.For example, all empty text content is displayed as "No data available", rather than some showing "None" and some showing "N/A".
  2. Semantic default value: Choose meaningful default values. For example, use a placeholder for missing images instead of just 'Not available'. Use 'Negotiable' for undetermined prices instead of '0 Yuan'.
  3. Avoid redundancyIt is important to set default values, but avoid adding default values to every variable that may be empty, especially those that will not have a significant impact on the page even if they are empty.Focus on key information and elements that will affect user experience.
  4. NotesafeFilterWhen the default value is an HTML fragment (likedefault:"<p>暂无数据</p>"), don't forget to usesafea filter to ensure that HTML is parsed correctly and not displayed as plain text.

By using the above method, you can efficiently and elegantly handle empty variables in the Anqi CMS template, ensure the integrity of website content, enhance user experience, and demonstrate the professionalism of the website.

Frequently Asked Questions (FAQ)

Q1:defaultanddefault_if_noneIn what situations will these filters have a significant difference? Which one should I choose?

A1:defaultThe filter will also treatnil(an empty string,""), a number0and boolean valuesfalseare all considered 'empty' and the default value is applied. Anddefault_if_noneThe filter only takes effect for variables that are strictlynil(null pointer). When the variable is""or0then,default_if_nonewill not be replaced.

Which one to choose depends on your business logic:

  • If you want empty strings, 0, and false to be considered as default values, usedefault.
  • If you think""and0is a meaningful valid value, only when the variable is completely uninitialized (nilA default value is needed whendefault_if_none.

Q2: Can I set a default value directly in a template tag (such asarchiveDetail)?

A2: No. Template tags (such as{% archiveDetail ... %}It is used to retrieve data, they do not directly support setting default output values within the tag.You need to assign the result obtained from the tag to a variable (if any), or use the filter directly in the tag's output section. For example:

{# 错误用法，标签内无法直接使用default #}
<p>{% archiveDetail with name="Description" default:"暂无简介" %}</p>

{# 正确用法，在输出结果上使用default过滤器 #}
<p>文章简介：{% archiveDetail desc with name="Description" %}{{ desc | default:"暂无简介" }}</p>
{# 或者，如果标签直接输出值 (例如上面第一个默认用法示例)，可以直接在标签外包裹过滤器 #}
<p>文章简介：{{ archive.Description | default:"暂无简介" }}</p>

Q3: How can I display a completely different HTML structure based on whether a variable is empty, rather than just replacing text?

A3: In this case, it is recommended to use in combinationifLogic judgment tag. Use first{% if 变量 %}Determine if the variable has a value, and then write two different HTML structures in{% if %}and{% else %}the blocks.

{% if archive.Images %}
    {# 如果有图片，显示图片轮播组件 #}
    <div class="image-carousel">
        {% for img in archive.Images %}
            <img src="{{ img }}" alt="图片">
        {% endfor %}
    </div>
{% else %}
    {# 如果没有图片，显示一个提示或占位符 #}
    <div class="image-placeholder">
        <p>暂无相关图片。</p>
    </div>
{% endif %}

This method provides more powerful conditional rendering capabilities, allowing flexible adjustment of the page layout and content presentation based on data status.