How to get and display the contact phone number and address set in the AnQiCMS template?

In website operation, clearly and accurately displaying contact information is crucial for enhancing user trust and promoting communication and interaction.AnQiCMS provides a convenient backend setting and template calling mechanism, allowing you to easily manage and display this key information.This article will introduce in detail how to configure contact phone numbers and addresses in the AnQiCMS backend, as well as how to obtain and flexibly display this content in website templates.

One, configure the contact phone and address in the AnQiCMS backend

First, we need to enter and manage contact information in the AnQiCMS management background. This operation is very intuitive.

Log in to the AnQiCMS backend and navigate to the left-hand menu bar option entitledBackend settings, then clickContact information settings.

On the contact information settings page, you will see a series of predefined fields, such as:

  • Contact: is usually the name you want to publish as your contact representative.
  • Contact phone number：Used to display the phone number for customers to dial.
  • Contact address：Your company or office specific location.
  • Contact email：Convenient for customers to communicate via email.
  • WeChat IDandWeChat QR code：Used to display WeChat contact information.

You just need to fill in your contact phone number and company address in the corresponding input box.In addition to this basic information, AnQiCMS also allows you to customize more contact parameters.For example, if you need to display a WhatsApp number, you can add a new parameter in the "Custom Settings Parameters" area at the bottom of this page, setting the parameter name (for example:WhatsApp) and parameter value.

After completing or modifying all the information, please make sure to click the "Save" button at the bottom of the page to ensure that your changes are successfully saved to the system.

Second, obtain and display contact information in the website template

After the contact information is configured in the background, the next step is to display this information on your website front end.AnQiCMS's template engine is developed based on the Go language, supporting syntax similar to the Django template engine, making it very convenient to call background data in templates.

AnQiCMS provides a special template tag for obtaining contact information:contact. By using this tag, you can accurately obtain the required information based on the field name set in the background.

Basic usage

contactThe basic format of the tag is:{% contact 变量名称 with name="字段名称" %}Optional variable name, if you want to store the data obtained into a temporary variable for subsequent processing, you can specify it;If you just want to output the data directly, you can omit the variable name.nameThe parameter is the field name you set in the background, for exampleCellphone/Addressor the parameter name you customize.

  1. Get and display the contact phone number

    In your template file (such as, footerpartial/footer.htmlor contact us pagepage/contact.htmlIn it, you can useCellphoneThis field name to get the contact phone number:

    <p>联系电话：<span>{% contact with name="Cellphone" %}</span></p>

    This will display the phone number set in the background<span>Tag inside.

  2. Get and display the company address

    Similarly, to get and display the company address, you can useAddressThis field name:

    <p>公司地址：<span>{% contact with name="Address" %}</span></p>

  3. Get and display custom contact information

    If you have customized other contact information in the background, such as the parameter nameWhatsAppThe WhatsApp contact information, the way to obtain it is also the same:

    <p>WhatsApp：<span>{% contact with name="WhatsApp" %}</span></p>

    In this way, the WhatsApp number you configure in the background will also be displayed on the page.

Complete example

To better demonstrate, the following is a template code snippet that includes contact information such as phone numbers and addresses, as well as some commonly used contact information.

<div class="footer-contact-info">
    <h3>联系我们</h3>
    <ul>
        <li>
            <strong>联系人：</strong>
            <span>{% contact with name="UserName" %}</span>
        </li>
        <li>
            <strong>联系电话：</strong>
            <a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">
                <span>{% contact with name="Cellphone" %}</span>
            </a>
        </li>
        <li>
            <strong>公司地址：</strong>
            <span>{% contact with name="Address" %}</span>
        </li>
        <li>
            <strong>电子邮件：</strong>
            <a href="mailto:{% contact with name="Email" %}">
                <span>{% contact with name="Email" %}</span>
            </a>
        </li>
        <!-- 假设您后台自定义了 WhatsApp 联系方式，参数名为 WhatsApp -->
        <li>
            <strong>WhatsApp：</strong>
            <span>{% contact with name="WhatsApp" %}</span>
        </li>
        <!-- 如果有微信二维码，可以这样显示 -->
        {% set qrcodeUrl = "" %}
        {% contact qrcodeUrl with name="Qrcode" %} {# 将二维码图片URL存储到 qrcodeUrl 变量 #}
        {% if qrcodeUrl %} {# 判断二维码URL是否存在 #}
        <li>
            <strong>微信二维码：</strong>
            <img src="{{ qrcodeUrl }}" alt="微信二维码" class="contact-qrcode-img">
        </li>
        {% endif %}
    </ul>
</div>

By using the above code, you can flexibly display all important contact information on the website. You can place this code at the footer of the website (partial/footer.html) or in the sidebar (partial/aside.htmlOr a dedicated contact us page (page/detail.html) and go through{% include "partial/footer.html" %}etc. tags refer to.

3. Further template application skills

  1. Gracefully handle null values: In practice, if some contact information on the back-end is not filled in, directly calling it may cause the page to appear blank. To enhance the user experience, you can use the AnQiCMS template'sifLogic judgment tag to check if the value exists. For example:

    {% set phone = "" %}
{% contact phone with name="Cellphone" %} {# 尝试获取联系电话并存入 phone 变量 #}
{% if phone %} {# 判断 phone 变量是否有值 #}
<p>联系电话：<a href="tel:{{ phone }}" rel="nofollow">{{ phone }}</a></p>
{% endif %}

    Only when the contact phone number is set in the background, this line of content will be displayed on the front end.

  2. Implement clickable dialing links: It is important to display the phone number directly, but it would be more convenient if you could click to dial. You can do this throughtel:the protocol, as shown in the example above:

    <a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a>

    When the user clicks on this link on a mobile device, the dialing function will be triggered automatically.

  3. Template modularization and reuse： In order to enhance the maintainability and reusability of the code, it is strongly recommended to encapsulate all contact display code into a separate template code snippet (for example, namedpartial/contact_info.html)。Then, in the footer, sidebar, or any other place where you need to display contact information, just use{% include "partial/contact_info.html" %}Labels can be introduced. In this way, when it is necessary to modify the display style of contact information in the future, only one file needs to be modified, and all references will be automatically updated.

By AnQiCMS's backend configuration and flexible template tags, you can easily manage and display all important contact information in a beautiful and efficient way on the website, thus enhancing the user experience and corporate image.

Frequently Asked Questions (FAQ)

Q1: What will be displayed on the front page if there is no contact phone number or address set on the backend?

A1: If you use it directly in the template{% contact with name="Cellphone" %}Such a label, but the background has not set the corresponding value, then the front-end page will be blank when displaying this position. To avoid this, it is recommended to use{% if %}Label for judgment, only when the data exists will it be displayed, as shown in the example in the "Gracefully Handle Null Values" section of this article.

Q2: Where can I see all the predefined contact field names (such as Cellphone, Address)?

A2: You can find it in the AnQiCMS development documentationcontactDetailed explanation of the tag. Specifically, please refer totag-contact.mdthe documentation, which listsnameAll available field names, including predefined fields and customizable social media fields, etc.

**Q3: I