How to set contact information in AnQiCMS and display it on the front page (such as phone, address, WeChat)?

In today's digital age, a website's contact information is not only for displaying information, but also a bridge for communication between the enterprise and customers.Clear and easily accessible contact information can effectively enhance customer trust and promote business conversion.AnQiCMS (Auto) is well aware of this and provides a simple and efficient way to set up and display various contact methods, whether it be phone, address, or WeChat.

Below, let us step by step understand how to configure and display these key information in AnQiCMS.

Step 1: Set your contact information in the background

Firstly, we need to enter the contact information into the AnQiCMS backend system. This process is very intuitive.

1. Log in to the AnQiCMS admin panel:Login to the AnQiCMS management interface using your administrator account.
2. Navigate to the contact information settings:In the left navigation menu, find the item , then click to expand, and you will see the item .Click to enter, this is where you manage all the contact information for your website.

Enter the [Contact Information Settings] page, and you will see some preset common fields, such as:

• Contact: Usually used for titles, such as “Mr. Wang” or “Customer Service Team”.
• Contact phone number:You want the customer to call this phone number.
• Contact address:The detailed address of your company or physical store.
• Contact email:The email address for the customer to contact you.
• 微信号：EnglishYour company or personal WeChat account.
• WeChat QR Code:Can upload a WeChat QR code image for easy scanning by customers.

You can fill in your information in the corresponding input box according to the actual situation.

Custom Contact Method:

• Parameter name:This is the name provided for template usage, it is recommended to use English, for exampleWhatsApp/FacebookLink. The system will automatically convert it to camel case naming.
• Parameter value:Enter the corresponding contact information, such as the full URL of the WhatsApp number or Facebook page.
• Note:This is an internal description for your and your team to understand the usage of this parameter, it will not be displayed on the front end.

Fill in the information and remember to click the [Save] button at the bottom of the page to ensure that all your changes have taken effect.

Step 2: Display your contact information on the front page.

Contact information has been set up, and the next step is to display them on the website's frontend page.AnQiCMS uses a concise syntax similar to Django template engine, which can easily call backend data through specific "tags".

Core tags:contact

In AnQiCMS template files, you can usecontacttags to obtain the contact information previously set in the background. Its basic usage is:

{% contact 变量名称 with name="字段名称" %}

Here:

• 变量名称An optional parameter, used to store the obtained value in a variable for repeated use in the template.
• 字段名称This is a required parameter, and it must match the field name you filled in the background [Contact Information Settings], whether it is preset or custom, for exampleCellphone/Address/Wechat/Qrcodeor the one you customizedWhatsApp.

Below are some common display examples:

1. Display contact phone number:You can add phone information in the footer or on the "Contact Us" page, and make it clickable for mobile users to directly dial.

<p>
    电话：<a href="tel:{% contact with name='Cellphone' %}" rel="nofollow">
        {% contact with name='Cellphone' %}
    </a>
</p>

Here,rel="nofollow"The attribute helps tell the search engine that this link does not pass weight, usually used for non-content links.

2. Display the company address:

<p>
    地址：{% contact with name='Address' %}
</p>

3. Display the WeChat ID:

<p>
    微信：{% contact with name='Wechat' %}
</p>

4. Display WeChat QR Code:For contact methods of image type, such as WeChat QR code, you need to use<img>tags to display. At the same time, to ensure that the image can be rendered correctly, it is recommended to use|safeFilter.

{%- comment %} 先尝试获取二维码图片链接，并存储到 qrcode 变量中 {%- endcomment %}
{%- contact qrcode with name='Qrcode' %}
{%- if qrcode %} {%- comment %} 判断 qrcode 变量是否有值，有值才显示 {%- endcomment %}
<div class="wechat-qrcode">
    <img src="{{ qrcode|safe }}" alt="微信二维码" style="width: 100px; height: 100px;">
    <p>扫码添加微信</p>
</div>
{%- endif %}

Here we first try to obtain and assign the QR code image linkqrcodeto a variable. Then, through{% if qrcode %}Judgmentqrcodecheck if the variable has a value, and only display the image if it does.|safeThe filter is crucial here, it tells the template engine to output the string as safe HTML content directly, avoiding that special characters in the URL are escaped and images cannot be displayed.

5. Show Custom WhatsApp Link:If you have set a custom parameter name in the background:WhatsApp，and filled in the WhatsApp chat link, it can be called like this：

{%- contact whatsappLink with name='WhatsApp' %}
{%- if whatsappLink %}
<p>
    WhatsApp: <a href="{{ whatsappLink }}" target="_blank" rel="nofollow">
        {% contact with name='WhatsApp' %}
    </a>
</p>
{%- endif %}

Suggested placement of template file：These contact information display codes are usually placed in the public part of the website, such as:

• bash.htmlorheader.html/footer.html:The header or footer of the website, ensuring that every page can display.
• page/detail.html(or custom single page template):Create a dedicated "Contact Us" page to showcase all contact information.

Practical cases and techniques: Build a complete footer contact information block.

Let's take a look at a practical code example that integrates multiple contact methods into the website footer, making it easy for visitors to find the information they need.

`html