How do I display a default value (such as 'No data') for empty variables in a template?

In website operation, the integrity of content display and user experience are crucial.When we call data in the AnQiCMS template, we sometimes encounter situations where certain variables are empty.If these empty variables are not handled properly, the front-end page may appear blank areas, 'null' text, and even cause layout chaos, thereby affecting the professionalism of the website and the user's browsing experience.This article will discuss in detail how to elegantly display a default value for empty variables in the AnQi CMS template, such as 'No data available'.

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

Core Solution: Flexible ApplicationdefaultFilter

defaultThe filter is the most direct and commonly used method to handle empty variables. Its function is that if the value of a variable is empty (includingnilAn empty string"", or a number0, boolean valuefalseIf the value is considered "false", it will output the default value we have set; otherwise, it will output the value of the variable itself.

Its basic usage is very simple:

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

Let's take a look at how to apply it through several common scenarios:

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 display "No introduction available.".

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

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

In this example, ifarchive.DescriptionThere is content, and its content will be displayed; if it is empty, it will display 'No introduction available.' Similarly, if the custom field called by the tag isarchiveDetailcustom fieldauthorempty, it will display 'Unknown'.

2. Picture link default value

The image is an important part of the website 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 image 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, the corresponding picture will be displayed; if it is empty,/static/images/placeholder.pngor/static/images/default_category.pngthis preset placeholder image will be displayed. At the same time, for SEO and accessibility,altThe property is also best set to a default value.

3. The default value for numbers or statistical data

For some statistical data, such as the number of page views of an articlearchive.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 of Filters

ExceptdefaultFilters, in addition to providingdefault_if_noneFilter. The main difference between the two lies in the definition of 'empty':

  • defaultWhen the variable isnilAn empty string"", or a number0, boolean valuefalsevalues that are considered 'false' will apply the default value.
  • default_if_none: is only applied when the variable is strictlynilIf the variable is empty, the default value will be applied.""or0but notnil,default_if_noneIt will 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 variables, for example, if you think a clear0is a valid value, not a default value situation, and only when the variable does not exist at all,nilthen a default value is needed,default_if_nonethis would be a better choice.

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

Combine condition judgment:ifTags, to implement more complex logic

Sometimes, displaying a default value may not be enough to express the logic we want.We may need to display a completely different HTML structure depending on whether the variable exists.ifLogic judgment tag.

{% 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 variables, thereby providing a more intelligent user experience.

**Practical Tips and Considerations

  1. Unified default value styleThroughout the website, use consistent default values for data of the same type.For example, all empty text content is displayed as "No data available
  2. The semantics of the default value: Choose meaningful default values. For example, use placeholder images instead of simple 'no available'. Use 'negotiable' instead of '0 yuan' when the price is not determined.
  3. Avoid over redundancyAlthough setting default values is important, it is advisable to 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.Focused on key information and elements that will affect user experience.
  4. NotesafeFilterWhen the default value is an HTML fragment (such asdefault:"<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 null variables in the AanQi CMS template, ensuring the integrity of website content, improving user experience, and showcasing the professionalism of the website.

Common Questions (FAQ)

Q1:defaultanddefault_if_noneWhat are the conditions under which these filters will have a significant difference? Which one should I choose?

A1:defaultthe filter willnilAn empty string (""）、数字0and boolean valuesfalseBoth are treated as 'empty' and the default value is applied.default_if_noneThe filter only applies tonilThe variable of (null pointer) is effective. When the variable is""or0whendefault_if_noneIt will not be replaced.

The choice depends on your business logic:

  • If you want empty strings, 0, and false to be considered as cases that require default values, usedefault.
  • If you think""and0is a meaningful valid value, only when the variable is completely uninitialized (nil）时才需要默认值，那么使用 Englishdefault_if_none.

Q2: 我可以直接在模板标签（如 English）中设置默认值吗？archiveDetail）中设置默认值吗？ English

A2: 不可以。模板标签（如 English{% archiveDetail ... %}The `auto` attribute 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.

{# 错误用法，标签内无法直接使用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 to display completely different HTML structures based on whether the variable is empty, not just replacing text?

A3: This situation recommends combining use.ifLogical judgment label. First use.{% if 变量 %}Determine if the variable has a value, and then write two different HTML structures in the respective blocks.{% if %}and{% else %}Block.

{% 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.