AnQiCMS template optimization: How to elegantly display default text when the contact information field is empty?

It is crucial to maintain the integrity of website content and user experience in website operation.AnQiCMS (AnQiCMS) provides a solid foundation for building various websites with its flexible content management and powerful template functions.However, in practical applications, we often encounter a seemingly trivial but user experience affecting problem: when key information such as the contact information of the website is not filled in the background, directly calling these fields on the front-end page will result in embarrassing 'gaps', making the page look unprofessional.

As an experienced website operations expert, I know that every detail can affect the trust users have in the website.Today, let's delve into how to elegantly handle the situation where the contact information field is empty in AnQiCMS. This allows the template to display a preset default text instead of a cold blank space when encountering null values, thus enhancing the professionalism and user-friendliness of the website.

AnQiCMS contact information management and potential 'white space' problems

AnQiCMS provides a convenient backend management interface for setting the website's contact information.Through the 'Background Settings' under the 'Contact Information Settings' feature, we can easily configure contacts, phone numbers, addresses, email addresses, WeChat ID, and other information, and even customize parameters to meet diversified needs.{% contact %}Label easily call this information, for example{% contact with name="Cellphone" %}To display the contact information.

However, the problem is exactly here. If we do not fill in a field in the background "Contact Information Settings" (such as "Phone Number") or accidentally delete the content, then when the template directly calls{% contact with name="Cellphone" %}When, the output will be an empty string.This is manifested as a blank line on the front end, or as a visual break in an area where information should be displayed.This 'white space' not only affects the page aesthetics, but may also make users feel that information is missing, reducing their trust in the website.

How can we avoid this unprofessional whitespace to ensure the integrity of the content and a good user experience of the website in any situation?AnQiCMS powerful template engine, providing us with two elegant solutions.

Solution one: conditional judgment, precise control of display logic ({% if %}Label)

The most intuitive and flexible method is to use the AnQiCMS template engine provided{% if %}Logical judgment label.We can first obtain the value of the contact information field, then judge whether this value exists or is empty, and then decide whether to display the actual content or display the default text we have set.

Let's take the 'contact phone number' (Cellphone) as an example. Suppose we want to display the prompt 'No phone information available' when the contact phone number is empty. We can write the template code like this:

<p>
    <strong>联系电话：</strong>
    {% contact phoneNum with name="Cellphone" %} {# 先将联系电话的值赋给 phoneNum 变量 #}
    {% if phoneNum %} {# 判断 phoneNum 变量是否有值 #}
        {{ phoneNum }}
    {% else %} {# 如果 phoneNum 为空，则显示默认文本 #}
        暂无电话信息
    {% endif %}
</p>

Code analysis:

  1. {% contact phoneNum with name="Cellphone" %}This line of code assigns the contact number value obtained from the background to a variable namedphoneNum.contactTags allow us to store the values obtained in this way into a temporary variable for subsequent processing.
  2. {% if phoneNum %}This is a conditional judgment statement, it will checkphoneNumDoes the variable contain any valid content. IfphoneNumHas a value (e.g., "138xxxxxxxx"), then the condition is true.
  3. {{ phoneNum }}InifExecute when the condition is true, output directly.phoneNumThe actual content of the variable.
  4. {% else %}：WhenifWhen the condition is false (i.e.,phoneNumis empty) when, elseThe code block will be executed.
  5. 暂无电话信息This is the default text we have set, which will be displayed when the contact phone number is empty.

The benefit of this method lies in its flexibility. You can display different default text based on different fields, and even execute more complex logic, such as hiding the entire field when it is empty.pLabel, or display a contact form link.

Solution two: Default value filter, simple and efficient (defaultFilter)

If you simply want to use a simple default text to replace when the field is empty, without the need for complex conditional judgment logic, then the AnQiCMS template engine providesdefaultThe filter will be a more concise and efficient choice.

defaultThe principle of the filter is very simple: it checks the value of the variable. If the value is considered to be 'empty' (including empty strings, the number 0, the boolean value false, andnilwait), it will use the default value you provided.

Similarly, take the example of “contact phone”, usingdefaultThe filter can be written as:

<p>
    <strong>联系电话：</strong>
    {% contact phoneNum with name="Cellphone" %}
    {{ phoneNum|default:"暂无电话信息" }}
</p>

Code analysis:

  1. {% contact phoneNum with name="Cellphone" %}: The same as the previous method, assign the value of the contact phone tophoneNumVariable.
  2. {{ phoneNum|default:"暂无电话信息" }}This isdefaultThe application of the filter. It will try to outputphoneNumthe value; ifphoneNumis empty, it will outputdefaultthe default text specified after the filter 'No phone information available.'

This method has less code and is highly readable, making it very suitable for scenarios where you just need simple default values to replace empty content. If you have multiple contact fields that need similar processing, usedefaultThe filter can make your template code more concise.

Practice exercise: Taking 'Contact Phone Number' as an example.

Let's apply both methods to a contact information display area. Suppose we have a simple contact information module:

<div class="contact-info">
    <h3>联系我们</h3>
    <ul>
        <li>
            <!-- 方法一：使用 if 标签 -->
            <strong>联系人：</strong>
            {% contact contactPerson with name="UserName" %}
            {% if contactPerson %}
                {{ contactPerson }}
            {% else %}
                安企CMS团队
            {% endif %}
        </li>
        <li>
            <!-- 方法二：使用 default 过滤器 -->
            <strong>联系电话：</strong>
            {% contact phone with name="Cellphone" %}
            {{ phone|default:"请致电 400-XXXX-XXX" }}
        </li>
        <li>
            <!-- 针对自定义字段的示例，同样适用 default 过滤器 -->
            <strong>WhatsApp：</strong>
            {% contact whatsappAccount with name="WhatsApp" %} {# 假设后台自定义字段名为 WhatsApp #}
            {{ whatsappAccount|default:"未设置" }}
        </li>
        <li>
            <strong>电子邮箱：</strong>
            {% contact emailAddress with name="Email" %}
            {% if emailAddress %}
                <a href="mailto:{{ emailAddress }}">{{ emailAddress }}</a>
            {% else %}
                <a href="mailto:[email protected]">[email protected]</a>
            {% endif %}
        </li>
    </ul>
</div>

Through the above code, whether it is the default contact information field or the contact information field customized in the AnQiCMS background, it can elegantly display the preset text or link when it is empty, thus avoiding the unprofessional issue of blank spaces.

Tips for operators: When to choose, how to optimize

  • Choose the appropriate plan:
    • If you need to execute a completely different HTML structure or more complex logic based on whether a field is empty (for example, displaying an image or hiding the entire module), then{% if %}Tags provide greater flexibility.
    • If you just want to replace a null value with a simple text string, thendefaultThe filter is undoubtedly the more concise and easier to maintain choice.
  • Default text friendliness:The default text should be clear, friendly, and have a certain guiding nature.For example, 'No phone information' is better than just a blank space, and 'Please call 400-XXXX-XXX' is more guiding, directly providing an alternative contact method.
  • Background data management:Although the template provides a mechanism for handling null values, but **the practice is still to fill in all key contact information as completely as possible in the AnQiCMS background.This reduces the complexity of front-end template processing and ensures the accuracy and timeliness of information.

Conclusion

AnQiCMS as an efficient and flexible enterprise-level content management system, its powerful template features enable us to fine-tune every detail of the website. By using reasonable{% if %}Logical judgment anddefaultThe filter not only solves the problem of 'white space' when the contact information field is empty, but also takes this opportunity to optimize the user experience, making the website present a professional, complete, and friendly image in any situation.As an operator, mastering these skills will undoubtedly give your website an edge in detail.

Frequently Asked Questions (FAQ)

Q1: Can the methods also be used to display default text when the data fields in the AnQiCMS template are empty, except for the contact information field?

A1:Of course you can. AnQiCMS template engine is universal, whether it is{% system %}obtained through tags, system settings information,{% archiveDetail %}or document detail fields,{% categoryDetail %}Get the category details or any other variable called in the template, as long as they may be empty, you can use it{% if %}Conditional judgment ordefaultA filter to display default text or execute the corresponding logic. The key is to identify which data fields may be empty and handle the template layer in advance.

Q2: How to determine if the contact information field customized in the AnQiCMS backend, such as 'WhatsApp', is empty and display the default text?

A2:The method is exactly the same. When you add a custom parameter in the "Contact Information Settings" of AnQiCMS backend, for example, the parameter name isWhatsAppyou can call it in the template like{% contact with name="WhatsApp" %}Therefore, you can use it like built-in fields{% if %}Judgment ordefaultFilter:

{# 使用 if 标签 #}
{% contact whatsappAccount with name="WhatsApp" %}
{% if whatsappAccount %}
    WhatsApp: {{ whatsappAccount }}
{% else %}
    无 WhatsApp 联系方式
{% endif %}

{# 使用 default 过滤器 #}
WhatsApp: {% contact whatsappAccount with name="WhatsApp" %}{{ whatsappAccount|default:"未提供" }}

Q3:defaultanddefault_if_noneWhat are the specific differences between the filters in the AnQiCMS template? Which one should I choose?

A3:In the AnQiCMS template environment, these two filters are both used to provide default values, but there are slight differences in the definition of 'empty':

  • defaultFilter:This applies to all 'falsy' values. This includesnil(null pointer), empty string (""), numbers0and a boolean valuefalseand empty arrays or slices, etc. In most cases, when you want a variable to be empty, it will display the default value,defaultIt is your most commonly used choice because it covers various "empty" situations.
  • default_if_noneFilter:Only fornil(Null pointer) The value takes effect. It does not consider an empty string, a number 0, or a boolean value false as 'empty' and apply the default value.

Select a recommendation:For the contact information field (usually a string), if the backend is not filled in, it will be an empty string""In this case,defaulta filter is a better choiceIt will capture empty strings and display default text.default_if_noneIt may not work because it may not consider an empty string to benil. Unless you explicitly know that a variable may be a Go language innil, and you want to handle the default value fornilonly, otherwise please use it first.default.