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

In today's digital age, a website's contact information is not just for displaying information, but also a bridge for communication between businesses and customers.Clear and easily accessible contact information can effectively enhance customer trust and promote business conversion.AnQiCMS (AnQi Content Management System) knows this and provides a simple and efficient way to set up and display various contact methods, whether it's phone, address, or WeChat.

Let's take a step-by-step look at how to configure and display these key information in AnQiCMS.

Step 1: Set your contact information in the background

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

1. Log in to the AnQiCMS backend:Log in to the AnQiCMS management interface using your admin account.
2. Navigate to the contact information settings:In the navigation menu on the left, find the [Background Settings], then click to expand, and you will see the [Contact Information Settings] item.Click to enter, this is where you manage all the contact information for your website.

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

• Contact: Usually used for addressing, such as “Mr. Wang” or “Customer Service Team”.
• Contact Phone:The phone number you want the customer to call.
• Contact address:The detailed address of your company or physical store.
• Contact Email:Customers can contact your address via email.
• WeChat ID:Your corporate or personal WeChat account.
• WeChat QR Code:You can upload a WeChat QR code image for easy scanning by customers.

You can fill in your information according to your actual situation.

Custom contact information:In addition to these common fields, AnQiCMS also provides great flexibility, allowing you to add custom contact information.For example, if you want to display WhatsApp numbers, Facebook homepage links, or other social media accounts, you can use the 'Custom Settings Parameters' function at the bottom of the page.Click on 'Add Custom Parameter' and you will see three input boxes:

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

Complete the form 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.

After setting up the contact information, the next step is to display them on the front page of the website.AnQiCMS uses a concise syntax similar to the Django template engine, easily calling back-end data through specific 'tags'.

Core tags:contact

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

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

Here:

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

Here are some common display examples:

1. Display contact information:You can add phone information in the footer or 'Contact Us' page and make it clickable for mobile users to call directly.

<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 company address:

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

3. Display 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 get the QR code image link and assign it toqrcodevariable. Then, by{% if qrcode %}the judgment.qrcodeThe variable exists, and the image is displayed only when it exists.|safeThe filter is crucial here, as it tells the template engine to output the string as safe HTML content directly, avoiding the special characters in the URL being escaped and causing the image to not display.

5. Show Custom WhatsApp Link:If you have set a custom parameter name in the background:WhatsAppand filled in the WhatsApp chat link, you can call it 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:The display code for these contact methods is 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 it displays on every page.
• page/detail.html(or a custom single-page template):Create a dedicated 'Contact Us' page that showcases all contact information.

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

Let's look at a practical code example of integrating multiple contact methods into a website footer, which allows visitors to easily find the information they need:

`html