How to dynamically display the contact information of the website in AnQiCMS templates?

In website operation, clearly and accurately displaying the contact information of the website is a key link in building trust with users and providing support.A contact method that is easy to find and keep updated, which can not only improve the user experience but also help users find you quickly when necessary.AnQiCMS as an efficient content management system provides a very flexible and intuitive way for you to dynamically display and manage this important information in your website templates.

Backend settings: centrally manage your contact information

When using AnQiCMS to manage website content, the first thing is to get familiar with the 'Contact Information Settings' function. It is locatedunder the 'Background Settings' menu, there is a 'Contact Information Settings' optionItem. This is the hub for you to manage all the external contact information of the website.

Enter this interface, you will see some commonly used default settings items, such as contacts, phone numbers, contact addresses, contact email, WeChat ID and WeChat QR code, etc.These fields are designed to meet the basic needs of most websites, and you can fill them out one by one according to the actual situation.For example, enter your customer service hotline in the 'Contact Phone' field, and enter your business email address in the 'Contact Email' field.

If these default fields do not fully meet your needs, AnQiCMS also provides a powerful function for custom settings parameters.For example, you may want to display WhatsApp contact information on your website, or social media links such as Facebook, Twitter, etc.At this point, you just need to click 'Add Custom Parameter', then:

• Parameter Name: This is the 'code' you use when calling this parameter in the template. To maintain code conventions and readability, it is recommended to use the English camelCase naming convention, for example, if you want to add WhatsApp, you can name itWhatsApp.
• Parameter valueHere you can fill in the actual content of this contact information, such as your WhatsApp number or social media homepage link.
• NoteThis field is only used for backend management, you can briefly describe the purpose of this parameter for future reference and maintenance.

After completing the entry of all contact information and adding custom parameters, please be sure to click Save to ensure that your changes take effect.

Called in the template: Make the contact information come alive.

Once the contact information on the backend is set up, the next task is to dynamically display them in the website's front-end template.AnQiCMS uses a syntax similar to the Django template engine, which makes it very intuitive to call data in templates.You will mainly use a name calledcontacttags.

contactThe basic usage of tags is:{% contact 变量名称 with name="字段名称" %}In which, the 'variable name' is an optional parameter, if you do not set it, the label will directly output the value of the corresponding field;If you set it, you can store the value in a variable for repeated reference in the template later.The key is innameThe value is the 'field name' you set in the background (including default field names and 'parameter names' for custom parameters).

Here are some common application examples:

1. Display contact information:

You can display your contact number using this tag in the footer or on the 'Contact Us' page and wrap it in<a>the tag for easy dialing by the user.

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

2. Display contact email:

Similarly, the email can be displayed in this way and addedmailto:Link, so that the user can click to send the email.

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

3. Display the company address:

If your company has a physical address, it is usually placed in the footer or contact page.

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

4. Display WeChat QR code:

For situations where images need to be displayed (such as WeChat QR code),contactThe tag will directly output the image URL, you can use it as<img>label'ssrcProperty.

<div class="wechat-qrcode">
    <img src="{% contact with name="Qrcode" %}" alt="微信二维码" />
    <p>扫码关注我们</p>
</div>

5. Display the custom WhatsApp contact information:

If you have customized a name in the backgroundWhatsAppThe parameter, you can call it like this in the template.

<li>WhatsApp：<a href="https://wa.me/{% contact with name="WhatsApp" %}" target="_blank">{% contact with name="WhatsApp" %}</a></li>

6. Calling in multi-site scenarios:

If you are using the multi-site management feature of AnQiCMS and want to callother sitesYou can use the contact information,siteIdSpecify the site ID with parameters. For example, the contact phone number of a site with ID 2:

<li>其他站点电话：{% contact with name="Cellphone" siteId="2" %}</li>

In most cases, you do not need to specify in the template of the current site.siteIdThe system will automatically retrieve the contact information of the current site.

Further thinking and practice.

After displaying the contact information dynamically, you can place it in the most suitable position according to the website design and user habits. Common practices include:

• Website Header (Header)：Generally, place the most critical contact phone number or social media icon.
• Website Footer (Footer)：Display complete contact information, such as address, phone, email, and registration number.
• “Contact Us” independent pageThis is a special page that can display all contact methods in detail, including maps, online forms, etc., and introduce the contact channels with detailed text.

Through AnQiCMS's flexible template tags and backend settings, you can easily implement unified management and dynamic display of website contact information, which not only improves operational efficiency but also provides users with a more convenient communication channel.

Frequently Asked Questions (FAQ)

Q1: Why did I set the contact information in the background, but it did not display on the website front template?

A1: First, check if you clicked the save button on the "Contact Information Settings" page in the background. Second, make sure to call it in the template.contacttags in the template,nameThe value of the property is exactly the same as the 'field name' (or 'parameter name' of the custom parameter) set in the background, including case.If it still does not display, it may be a template cache problem. You can try to manually clear the cache in the 'Update Cache' feature of the AnQiCMS backend.

Q2: How to add social media contact information other than phone and email, such as WhatsApp or Facebook links?

A2: AnQiCMS' contact information settings support custom parameters. You just need to click 'Add Custom Parameter' in the background, then set a 'parameter name' (such asWhatsAppFill in the corresponding number or link in the "Parameter Value". Then, you can call it in the template through{% contact with name="WhatsApp" %}this way.

Q3: How can I ensure that each website displays its own separate contact information if I manage multiple websites?

A3: AnQiCMS supports multi-site management. After you have configured independent contact information for each site, it can be called in the corresponding site templatecontactWhen a tag is used, the system will default to reading the contact information of the current site, no additional settings are required. If you need to call a contact number from a templatefrom a non-current siteYou can use the contact information,siteIdparameters, for example{% contact with name="Cellphone" siteId="2" %}to specify the contact number of the site with the call ID of 2.