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

In website operation, clearly and accurately displaying contact information is crucial for enhancing user trust and promoting communication.AnQiCMS provides a set of convenient backend settings and template calling mechanisms, allowing you to easily manage and display these key information.This article will introduce in detail how to configure contact phone and address in AnQiCMS backend, as well as how to obtain and flexibly display these contents in the website template.

一、In AnQiCMS backend, configure contact phone number and address

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

Log in to the AnQiCMS admin panel, then navigate to the left-hand menu bar's "Backend settings" option, and then click the "Contact information settings.

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

  • Contact Person: Is the contact name you want to publish publicly.
  • Phone Number：For customers to see the phone number they call.
  • Contact Address：The specific location of your company or office.
  • Contact Email：Convenient for customers to communicate via email.
  • WeChat IDandWeChat QR Code：For displaying WeChat contact information.

You only need to enter your phone number and company address in the corresponding input boxes.In addition to these basic information, AnQiCMS also allows you to customize more contact parameters.WhatsApp）and parameter values.

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.

In the website template, obtain and display contact information

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

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

Basic Usage

contactThe basic format for using tags is:{% contact 变量名称 with name="字段名称" %}.The variable name is optional. 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 (for example, footer)partial/footer.htmlOr contact us on the contact pagepage/contact.html), you can useCellphoneThis field name to get the contact phone number:

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

    Here, the contact phone number set in the background will be displayed.<span>Tags inside.

  2. 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, for example, the parameter name isWhatsAppThe WhatsApp contact information, the way to get it is the same:

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

    This way, the WhatsApp number you have configured in the background will also appear on the page.

Complete example

To better display, the following is a template code snippet that includes contact phone numbers and addresses as well as other common 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>

Through 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), the sidebar (partial/aside.html) Or contact us through a special page (page/detail.html) and proceed{% include "partial/footer.html" %}Refer to tags such as.

Section 3: Further Template Application Techniques

  1. Gracefully handle null values： In actual use, if some contact information in the background 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.ifCheck for the existence of a value using logical judgment labels. 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 this line of content will be displayed on the front end when the contact phone number is set on the backend.

  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 achieve this bytel:the protocol, as shown in the above example:

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

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

  3. Template modularization and reuse： To improve the maintainability and reusability of the code, it is strongly recommended to encapsulate all contact information display codes into an independent template code snippet (for example, named partial/contact_info.html）。Then, on the footer, sidebar, or any other location on your website where you need to display contact information, simply use{% include "partial/contact_info.html" %}Label it to introduce. In the future, when you need to modify the display style of contact information, you only need to modify one file, and all references will be automatically updated.

Through the backend configuration and flexible template tags of AnQiCMS, you can easily manage and display all important contact information in a beautiful and efficient manner on the website, thereby enhancing the user experience and corporate image.

Common Questions (FAQ)

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

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

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

A2: You can find the development documents of AnQiCMScontactDetailed explanation of tags. Specifically, please refer totag-contact.mdthe documents, which listnameAll available field names, including predefined fields and customizable social media fields, etc.

**Q3: I