How to judge whether a contact field (such as Qrcode) in the AnQiCMS template has a value?

In website operation and template development, we often need to dynamically adjust the display of the front-end page based on the setting of the background content.Especially for contact information and other important information, ensure that it is displayed after it exists to effectively avoid broken links, blank areas, or incomplete information on the page, thereby improving the user experience.

Today, let's delve deeply into how to make elegant and accurate judgments in the AnQiCMS template.contactThe contact information field obtained by the tag (for example)Qrcodehas been set.

Know AnQiCMS'scontactTag

Built-in in AnQiCMScontactTags are a very practical feature that allows us to directly access various contact information from the preset "Contact Settings" in the background, such as contacts, phone numbers, addresses, emails, as well as the WeChat QR code we are focusing on today (Qrcode）et al. This tag is usually used in the following way{% contact 变量名称 with name="字段名称" %}.

For example, if you want to get the address of the WeChat QR code image set in the background, you can write it like this：

{% contact with name="Qrcode" %}

This simple tag will directly output the backgroundQrcodeThe field value.But what if the backend does not upload the QR code image, what will this label output?It usually outputs an empty string.<img>label'ssrcThe attribute, will cause the page to display a broken image icon, which is obviously not what we want.

Skillfully use{% if %}The tag determines whether the field has a value

AnQiCMS's template engine supports syntax similar to Django templates, where{% if %}Tags are the core tools for conditional judgment.It can determine whether a variable has a 'truthy' value.{% if 变量 %}the judgment result will befalseThis means that we do not need to worry about the specific 'empty' type returned when the background field is not set, as the template engine will intelligently judge it as having no value.

To judgeQrcodeIf the field has a value, we can take the following steps:

  1. Assign the field value to a variable:To facilitate subsequent judgments and uses, it is recommended to first assigncontactTags retrieved from comments.QrcodeThe value to a temporary variable, such asqrcodeUrl.

    {% contact qrcodeUrl with name="Qrcode" %}

    This statement will attempt to retrieve the contact information namedQrcodeand store the result in a variable. If the background is not set,qrcodeUrlit will be an empty string. Now, we can directly accessqrcodeUrl.

  2. Use{% if %}Label for judgment:the variable.qrcodeUrlThe variable makes a conditional judgment.

    {% if qrcodeUrl %}
    <!-- 如果 qrcodeUrl 有值，则显示二维码 -->
{% else %}
    <!-- 如果 qrcodeUrl 没有值，则显示替代内容或不显示 -->
{% endif %}

Combining these two steps, we can build a robust and user-friendly QR code display logic:

{# 1. 从后台获取 Qrcode 字段的值，并赋给 qrcodeUrl 变量 #}
{% contact qrcodeUrl with name="Qrcode" %}

{# 2. 判断 qrcodeUrl 变量是否有值 #}
{% if qrcodeUrl %}
    <div class="contact-item contact-qrcode">
        <p class="title">扫描微信二维码添加好友：</p>
        <img src="{{ qrcodeUrl }}" alt="微信二维码" class="qrcode-image">
    </div>
{% else %}
    {# 当后台没有设置微信二维码时，我们可以选择显示一段提示文本，或者干脆什么都不显示 #}
    <div class="contact-item no-qrcode">
        <p class="title">微信二维码暂未提供。</p>
        <!-- 或者您也可以留空，不显示任何内容 -->
    </div>
{% endif %}

In the above code, only whenqrcodeUrlWhen there is a real value,<img>the tag will be rendered, thus avoiding the problem of broken images. IfqrcodeUrlIf empty, the page will display a prompt saying 'WeChat QR code is not provided yet', instead of an eye-sores placeholder.

Generalization: Applies to all contact information fields

This judgment logic is not only applicable toQrcodefields, but also to all fields obtained throughcontacttags in AnQiCMS. Whether it is to judge contactCellphonephone, contact emailEmailOr it is any contact information field that you customize on the backend, and its judgment method is the same.

For example, judgment of contact phone number: 

{% contact phoneNumber with name="Cellphone" %}
{% if phoneNumber %}
    <p>联系电话：<a href="tel:{{ phoneNumber }}">{{ phoneNumber }}</a></p>
{% else %}
    <p>暂无联系电话。</p>
{% endif %}

By first assigning the field value to a variable, then{% if %}The pattern of judgment, you can ensure that the website can display contact information beautifully in different configuration states, enhance the user experience and the professionalism of the website.This flexible conditional control capability is a manifestation of the strength of AnQiCMS templates, and it is also an important guarantee for our refined website operation.

Frequently Asked Questions (FAQ)

  1. Q: Why can't we just{% if contact with name="Qrcode" %}judge like this?A:{% contact ... %}The tag itself is used to output content, not to directly return a boolean value forifJudgment. In the template syntax of AnQiCMS, a condition judgment usually requires a variable that has already been assigned. Therefore, first through{% contact variableName with name="FieldName" %}Assign a value tovariableName, and then use{% if variableName %}Make a judgment, it is a more standardized and feasible approach.

  2. Q: How can I judge if any of the contact methods have a value and display a common 'Contact Us' block?A: You can first get the values of these fields into different variables, then use{% if %}the logical OR (or) operator for combination judgment.

    {% contact phone with name="Cellphone" %}
{% contact email with name="Email" %}
{% contact qrcode with name="Qrcode" %}


{% if phone or email or qrcode %}
    <div class="contact-us-block">
        <h3>联系我们</h3>
        {% if phone %}<p>电话：{{ phone }}</p>{% endif %}
        {% if email %}<p>邮箱：{{ email }}</p>{% endif %}
        {% if qrcode %}<p>扫描二维码：<img src="{{ qrcode }}" alt="联系二维码"></p>{% endif %}
    </div>
{% else %}
    <p>暂未提供任何联系方式。</p>
{% endif %}

  3. Q: Besides checking if a field has a value,{% if %}can you check other conditions?A: Of course you can.{% if %}The tag supports multiple condition checks, such as:

    • Comparison operation: {% if count > 0 %}/{% if price == 100 %}
    • String contains: {% if "keyword" in item.Title %}
    • Boolean value: {% if isActive %}
    • Logical combination: {% if user.IsAdmin and user.IsLoggedIn %}This makes AnQiCMS templates highly flexible, capable of meeting various complex page logic requirements.