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

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.An easy-to-find and keep-updated contact method that not only enhances user experience but also helps users find you quickly when necessary.AnQiCMS as an efficient content management system, provides a very flexible and intuitive way, allowing you to dynamically display and manage these important information in the website template.

Backend settings: centrally manage your contact information

When using AnQiCMS to manage website content, the first thing to familiarize yourself with is the 'Contact Information Settings' feature in the back-end. It is locatedunder the 'Back-end Settings' menu, there is a 'Contact Information Settings' optionItem. This is the hub for you to centrally manage all external contact information of the website.

If these default fields do not fully meet your needs, AnQiCMS also provides powerful features for custom settings.For example, you may want to display WhatsApp contact information on your website, or links to social media such as Facebook, Twitter, etc.

  • Parameter nameThis is the 'code' you use when calling this parameter in the template. For the sake of code standardization and readability, it is recommended to use the camelCase naming convention in English, for example, if you want to add WhatsApp, you can name itWhatsApp.
  • parameter valueHere fill in the actual content of this contact information, such as your WhatsApp number or social media homepage link.
  • [en] NoteThis field is only used for backend management, you can briefly describe the use of this parameter for easy viewing and maintenance in the future.

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

Called in the template: Make contact information come alive

Once the contact information is set up on the backend, the next task is to dynamically display them in the website's frontend template.AnQiCMS uses syntax similar to Django template engine, which makes it very intuitive to call data in templates.contactlabel.

contactThe basic usage of the tag is:{% contact 变量名称 with name="字段名称" %}.where “variable name” is an optional parameter, if you do not set it, the label will directly output the corresponding field value; if you set it, you can store this value in a variable for easy multiple references in the template.nameProperty, its value is the 'field name' (including default field names and 'parameter name' of custom parameters) set in the background.

Below are some common application examples:

1. Display contact phone number:

You can use this tag to display your contact phone number in the footer or on the "Contact Us" page, and wrap it in<a>tags for easy dialing by users.

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

2. Show contact email:

Similarly, the email can be displayed in this way, and addedmailto:a link for users to click and send an email.

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

3. Show 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 that require displaying images (such as WeChat QR codes),contactThe label will directly output the image URL, you can use it as<img>Tagssrcproperties.

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

5. Display custom WhatsApp contact information:

If you have customized a field named in the background,WhatsAppThe parameter, and 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. Call in multi-site scenarios:

If you are using the multi-site management feature of AnQiCMS and want to call the friend link list in a template of a specific site,other sitesContact information, you can usesiteIdParameters can be used to specify the site ID. For example, the contact phone number of the 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 the contact information is dynamically displayed, you can place it in the most suitable position according to the website design and user habits. Common practices include:

  • Website header (Header):usually placed the most important contact phone number or social media icons.
  • Website footer (Footer):display the complete contact information, such as address, phone, email, filing number, etc.
  • “Contact Us” standalone pageThis is a special page that can display all contact methods in detail, including maps, online forms, etc., and provide a detailed description of the contact channels.

Through the flexible template tags and background settings of AnQiCMS, you can easily achieve 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.


Common Questions (FAQ)

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

A1: Firstly, please check if you clicked the save button on the 'Contact Information Settings' page in the background. Secondly, ensure that the template is calledcontactthen,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 the case.If it still does not display, it may be a template cache issue. You can try manually clearing 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's “Contact Settings” supports custom parameters. You just need to click “Add Custom Parameter” in the background, and then set a “Parameter Name” for your social media contact information (for exampleWhatsApp),and fill in the corresponding number or link in the 'Parameter Value'. After that, you can call it in the template in this manner.{% contact with name="WhatsApp" %}such way.

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

A3: AnQiCMS supports multi-site management. After you have configured independent contact information for each site, call it in the corresponding site templatecontactWhen labeling, the system will default to reading the contact information of the current site, without the need for additional settings. If you need to call the contact phone number of a site with ID 2 in a template,Not the current siteContact information, you can usesiteIdparameters, such as{% contact with name="Cellphone" siteId="2" %}specify it by calling ID 2.