How to call and display the contact information configured on the backend in the website front-end?

In modern website operations, it is crucial to clearly and conveniently display the company's contact information.AnQiCMS (AnQiCMS) fully understands this requirement and provides flexible and easy-to-operate backend configuration options, allowing you to dynamically display contact information on the website front end without writing complex code.This article will provide a detailed introduction on how to configure and call these contact methods in the AQ CMS, so that your users can find you as soon as possible.

1. Backend configuration of contact information: The Source of Information

All the frontend displayed data comes from the careful configuration on the backend.In the Anqi CMS, managing the website's contact information is a straightforward process.“Backend Settings”and then click“Contact Information Settings”.

Here, you will find a series of preset common contact information fields, such as:

  • Contact (UserName): This is the contact name you want to publish externally.
  • Contact Phone (Cellphone): The most direct way for customers to communicate with you.
  • 联系地址 (Address)：Convenient for customers to conduct on-site inspections or send items.
  • Contact Email (English)：Common channels for business cooperation or detailed inquiries.
  • 微信号 (Wechat)：Popular instant messaging methods at the moment.
  • 微信二维码 (Qrcode)：Convenient for users to scan and add.
  • Moreover, the security CMS also includes many social media fields,QQ, WhatsApp, Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, YoutubeEnglish, in order to meet the needs of global operation and multi-channel promotion.

If these preset fields still do not meet your specific needs, the Anqi CMS also provides powerfulCustom setting parametersFunction. For example, you may need a dedicated after-sales service phone number or a specific business consultation QQ group number, you can add custom parameters here. Just fill in one“Parameter name”（This is the key identifier called in the front-end template, it is recommended to use English）, assigning it the corresponding“Parameter value”，and add“Note”Explain its purpose, and it can be easily expanded. The addition of these custom parameters greatly enhances the flexibility and customization of the website contact information display.

二、Front-end Template Calling Core: Contact Information Tag

In the template system of Anqi CMS, calling the contact information configured on the back-end mainly depends on a name calledcontactThis is a specialized tag. The tag is designed to be very concise and efficient, and can accurately extract the corresponding data from the background based on the field name you provide.

contactThe basic format for using tags is:{% contact 变量名称 with name="字段名称" %}.

  • 变量名称is optional, if you want to assign the contact information obtained to a temporary variable for subsequent processing (for example,ifIf a condition exists, you can use it. If you just want to output the data directly, you can omit this part.
  • name="字段名称"is the core part, you need to specify the field name you configured in the background "Contact Information Settings" here.Cellphone/Email），or you define the field (such as the field you define)WhatsApp），are all through thisnameParameters can be obtained.
  • siteIdParameters are generally not required to be filled in, they are mainly used in multi-site management scenarios, when you need to specify contact information to be called from a non-current site.For most single-site users, the default option is sufficient.

The template engine of Anqi CMS supports syntax similar to Django, so the writing of these tags is very intuitive.

Three, example of calling common contact information fields

UnderstoodcontactThe usage of the label, then we will go through some specific examples, and see how to flexibly display various contact methods on the website front-end.

1. Display contact name and phone number

Generally, the footer of a website or the "Contact Us" page displays the name and phone number of the contact person.

<p>联系人：{% contact with name="UserName" %}</p>
<p>联系电话：<a href="tel:{% contact with name="Cellphone" %}">{% contact with name="Cellphone" %}</a></p>

Here, we use it directly.name="UserName"andname="Cellphone"To obtain the name and phone number of the contact person configured on the backend, and to pass through<a href="tel:...">Labels make phone numbers clickable directly on mobile devices.

2. Display contact address and email.

For convenience, contact address and email are often displayed together.

<p>公司地址：{% contact with name="Address" %}</p>
<p>电子邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>

Similarly, the email address has also been added.mailto:Clicking on the link will directly open the email client.

3. Display WeChat QR code

The display of the WeChat QR code is slightly different, it needs to use<img>Label to load the image.

<div class="wechat-qrcode">
    <p>微信扫一扫，添加好友：</p>
    {% contact wechatQrcode with name="Qrcode" %}
    {% if wechatQrcode %}
        <img src="{{ wechatQrcode }}" alt="微信二维码" />
    {% else %}
        <p>暂无微信二维码信息</p>
    {% endif %}
</div>

Here we first assignQrcodeto a temporary variable.wechatQrcode, and then useifstatement to check if the variable exists. If it exists, it will go through<img>Label display, otherwise display a prompt message. It is a good programming habit that can prevent blank or error messages from appearing when data is missing.

4. Call other social media or custom fields

Whether it is a preset social media field (such as)WhatsApp) or a custom field (such as a field named in the back-end)ServiceLineThe customer service hotline), the calling methods are all consistent.

<p>WhatsApp：{% contact with name="WhatsApp" %}</p>
<p>客服热线：{% contact with name="ServiceLine" %}</p>

as long asnameThe parameter corresponds exactly to the field name configured on the back-end, and information can be accurately obtained and displayed.

English, integration and optimization: Make information more flexible to display

Integrate the scattered contact information into a unified area and optimize it, which can make your website look more professional and improve the user experience.

You can create an information block in the footer or on a dedicated 'Contact Us' page to display all contact information. To ensure the page is tidy and to avoid an unattractive blank line when a contact method is not filled in, it is recommended to use conditional judgment statements.ifTo determine if information exists.

<div class="contact-info-block">
    <h4>联系我们</h4>
    <ul>
        {% contact userName with name="UserName" %}
        {% if userName %}<li>联系人：{{ userName }}</li>{% endif %}

        {% contact cellphone with name="Cellphone" %}
        {% if cellphone %}<li>电话：<a href="tel:{{ cellphone }}">{{ cellphone }}</a></li>{% endif %}

        {% contact contactEmail with name="Email" %}
        {% if contactEmail %}<li>邮箱：<a href="mailto:{{ contactEmail }}">{{ contactEmail }}</a></li>{% endif %}

        {% contact contactAddress with name="Address" %}
        {% if contactAddress %}<li>地址：{{ contactAddress }}</li>{% endif %}

        {% contact wechatId with name="Wechat" %}
        {% if wechatId %}<li>微信：{{ wechatId }}</li>{% endif %}

        {% contact whatsappId with name="WhatsApp" %}
        {% if whatsappId %}<li>WhatsApp：{{ whatsappId }}</li>{% endif %}
    </ul>

    {% contact wechatQrcode with name="Qrcode" %}
    {% if wechatQrcode %}
        <div class="wechat-qrcode-display">
            <p>微信扫码咨询：</p>
            <img src="{{ wechatQrcode }}" alt="微信二维码" />
        </div>
    {% endif %}
</div>

In this way, each contact information will first be assigned to a temporary variable and then{% if 变量名 %}To determine whether this information exists.Only when it exists, the corresponding HTML code will be rendered, which ensures the integrity of the content and avoids page layout problems caused by empty data.As for the final style and layout, it can be beautified through CSS files.

Here, you have mastered the technique of how to configure contact information in the Anqi CMS backend and dynamically and flexibly present it on the website front end.The design concept of AnQi CMS is to make content management simple and efficient. Through these tags, you will be able to easily manage and display your key information.

Common Questions (FAQ)

1. I have set the contact information in the background, but the front-end page does not display. What is the reason?Firstly, please ensure that you have used it correctly in the template{% contact %}labels, andnameThe parameter entered is the field name configured on the back-end (including uppercase and lowercase).其次，check if the template file has been uploaded to the server and activated.If cache is used, please try to clear the system cache of the security CMS.Finally, confirm that you have filled in the content for the corresponding field in the background "Contact Information Settings".

2. How to call the contact information of another site in a multi-site secure CMS?Anqi CMS'scontacttag supportsiteIdparameter. You can access it via{% contact with name="FieldName" siteId="另一个站点的ID" %}Specify the contact information for calling a specific site. You can find the ID of each site in the "Multi-site Management" section in the background.

3. If I set a custom contact method, such as "After-sales phone number", how should it be called on the front end?Assuming you have added a "parameter name" in the "Contact Information Settings" > "Custom Settings Parameters" in the background, then in the frontend template, you can throughAfterSalesPhonethe following field.{% contact with name="AfterSalesPhone" %}Call and display its "parameter value". The calling method is exactly the same as the preset field, just make surenamethe parameter is consistent with the "parameter name" you defined.