How to call and display contact information configured on the back-end in the website frontend?

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

1. Configure contact information on the back-end: Source of information

All the data displayed on the front-end originates from the careful configuration on the back-end.In AnQi CMS, managing the contact information of the website is a straightforward process.You need to log in to the backend management interface and then navigate to the left menu's“Background Settings”, then clickthe "Contact Information Settings".

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

• Contact (UserName): This is usually the name of the contact person you want to publish externally.
• Contact Phone (Cellphone): This is the most direct way for customers to communicate with you.
• Contact Address (Address): Convenient for customers to inspect on-site or send items.
• Contact Email (Email): Common channels for business cooperation or detailed consultation.
• WeChat ID (Wechat): Popular instant messaging methods at the moment.
• WeChat QR Code (Qrcode): Convenient for users to scan and add.
• Moreover, AnQi CMS is integrated with many social media fields such asQQ, WhatsApp, Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, Youtubeetc., to meet the needs of global operations and multi-channel promotion.

If these preset fields do not meet your specific needs, AnQi CMS also provides powerful"Custom Setting Parameters"Function. For example, you may need a dedicated customer service hotline 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), assign it accordingly“Parameter value”and add,"Remarks"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.

Two, Front-end Template Core: Contact Information Tag

In the Anqi CMS template system, the contact information configured on the back-end mainly depends on a name calledcontactThe dedicated tag. This tag is designed to be very concise and efficient, able to accurately extract the corresponding data from the background according to the field name provided.

contactThe basic format of the tag is:{% contact 变量名称 with name="字段名称" %}.

• 变量名称It is optional, if you want to assign the contact information obtained to a temporary variable for subsequent processing (for example, inifIf it exists in the condition, 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 Settings" here. Whether it is a preset field (such asCellphone/EmailOr your custom field (such as one you define)WhatsAppAll of this goes through itnameParameter to obtain.
• siteIdThe parameter is generally not required to be filled in, it is mainly used in multi-site management scenarios, when you want to call contact information from a non-current site, it needs to be specified.For most single-site users, keep the default.

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

3. Example of calling the common contact information field

UnderstoodcontactAfter the usage of tags, let's take some specific examples to see how to flexibly display various contact methods on the website front-end.

1. Display the contact person's name and phone number

Generally, the footer of a website or the "Contact Us" page will display 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 directlyname="UserName"andname="Cellphone"to obtain the contact name and phone number configured in the background and to display them.<a href="tel:...">Label, so that the phone number can be directly clicked to dial on mobile devices.

2. Show contact address and email

For the convenience of users, contact addresses and emails often appear 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 been addedmailto:Clicking on the link will directly open the email client

3. Show the WeChat QR code

The display of the WeChat QR code is slightly different, it needs to use<img>Tag 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 need toQrcodeThe value is assigned to a temporary variable.wechatQrcodeThen 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 avoid blank or error messages when data is missing.

4. Call other social media or custom fields

Whether it is a preset social media field (such asWhatsApp) or a custom field (for example, one you added named in the back endServiceLineCustomer service hotline, the calling methods are all consistent.

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

JustnameParameters that correspond to the field names configured in the background can accurately obtain and display information.

The, Integration and Optimization: Let information be 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 provide a better user experience.

You can create an information block at the footer or a dedicated "Contact Us" page to display all contact information. To ensure the page is neat and to avoid an unattractive blank line when a contact method is not filled in, it is recommended to use a conditional statement.ifTo determine whether the 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 is first assigned to a temporary variable and then through{% if 变量名 %}To determine whether the information exists. It will only render the corresponding HTML code when it exists, which ensures the integrity of the content and avoids layout problems caused by empty data.As for the final style and layout, it can be beautified through a CSS file.

You have now mastered the technique of how to configure contact information on the Anqi CMS backend and dynamically and flexibly display 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.

Frequently Asked Questions (FAQ)

1. I have set up the contact information in the background, but it is not displayed on the front-end page, what could be the reason?First, make sure you have used the template correctly.{% contact %}the tags, andnameThe parameter fills in the field name configured on the backend (including uppercase and lowercase).Next, check if the template file has been uploaded to the server and activated.If cache was used, please try to clear the system cache of Anqi CMS.Finally, confirm that you have filled in the content for the corresponding fields in the "Contact Information Settings" on the backend.

How to call the contact information of another site in a multi-site secure CMS?Of Security CMScontactTag supportsiteIdparameter. You can use{% contact with name="FieldName" siteId="另一个站点的ID" %}Specify the contact information for calling a specific site. You can find the IDs of each site in the "Multi-site Management" section of the backend.

3. How can I call a custom contact method, such as "after-sales phone number", on the front end?Assuming you add a "parameter name" in the "Custom Settings Parameters" under the "Contact Information Settings" in the backgroundAfterSalesPhonefield. Then in the front-end template, you can use{% 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 define.