How to dynamically display the `contact` label on a website (phone number, address, email, etc.)?

AnQiCMS (AnQiCMS) provides a flexible and efficient way to manage all kinds of information on the website, among which the dynamic display of website contact information is achieved through its built-incontactTags can easily be implemented.This means you do not need to manually modify the code, and you can centrally manage phone numbers, addresses, email addresses, and other information in the background. They will be automatically updated to various pages of the website.

One, Set the website contact information centrally in the background

To dynamically display contact information, you first need to enter this information into the Anqi CMS backend. The operation path is very intuitive: after logging in to the backend, navigate toBackend settingsThen, select the menu option.Contact information settings.

On this page, you will see a series of default settings, including:

  • Contact PersonFor example, your name or company contact person.
  • Phone Number: This is the main contact phone number of the company.
  • Contact Address: The detailed address of the company.
  • Contact EmailEnglish for customer communication email address.
  • WeChat IDEnglish for customers to add WeChat friends.
  • WeChat QR CodeEnglish for directly uploading WeChat QR code image.

In addition to these commonly used contact methods, the security CMS also providesCustomize settings parametersFunction.If you have any special contact information you want to display, such as WhatsApp, Facebook homepage link, Twitter account, or any other information that needs to be dynamically displayed on the website, you can add it here.

When customizing parameters, you need to fill in:

  • Parameter nameThis is the identifier for the information you call in the template.Suggest using English, the system will automatically convert it to camel case.WhatsApp.
  • parameter valueThis is the actual content to be displayed, such as your WhatsApp number or Facebook homepage URL.
  • [en] NoteThis is used to record the purpose of this custom parameter for easy management.

Through this method, all contact information of websites is centrally stored in the background. Whether it is to update the phone number or to change the email address, it only needs to be modified once in the background, and all the places calling this information on the website will be automatically updated.

auto, In the website template, dynamically call the contact information

After completing the backend contact information setup, the next step is to use it in the website front-end templatecontactThe tag is used to dynamically display this information. The template engine of Anqi CMS adopts a syntax similar to Django, with a simple and clear calling method.

contactThe basic usage method of the tag is:{% contact 变量名称 with name="字段名称" %}. Among them,nameThe attribute is key, it needs to match the "parameter name" you set in the background or the default field name.变量名称Is optional, if you want to store the obtained value in a variable for subsequent processing, you can specify a variable name; otherwise, the label will output the content directly.

Below are some common contact methods and their correspondingcontactTag usage example:

  1. Display contact phone numberIf you want to display the company's contact phone number in the footer or contact us page, you can usename="Cellphone":

    <p>联系电话：{% contact with name="Cellphone" %}</p>

    or add the phone number to a clickable link:

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

  2. Display contact emailEmails are usually used toname="Email"and can be combined withmailto:protocol, allowing users to click to send emails:

    <p>邮箱地址：<a href="mailto:{% contact with name='Email' %}">{% contact with name="Email" %}</a></p>

  3. Display contact address name="Address"Applicable for displaying the physical address of the company:

    <p>公司地址：{% contact with name="Address" %}</p>

  4. Show WeChat QR CodeIf the WeChat QR code image is uploaded on the backend, it can be used:name="Qrcode". Since it returns an image URL, it needs to be used with:<img>Label usage:

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

    Please note, for page accessibility (SEO and visually impaired users), it is a good habit to add.altAttributes are a good habit.

  5. Display custom contact informationAssuming you have added a custom parameter in the background, the parameter name isWhatsApp，The parameter value is your WhatsApp number. You can call it in the template like this:

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

    Here are theWhatsAppThis is the parameter name you set in the background.

  6. Call in a multi-site environmentIf your security CMS has deployed multiple sites and you need to call the contact information of a specific site, you can usesiteIdParameters:

    <p>站点A电话：{% contact with name="Cellphone" siteId="1" %}</p>

    Generally, if you do not need to call across sites, you can ignoresiteIdParameters, the system will automatically obtain the contact information of the current site.

Through these flexible calling methods, you can ensure that the contact information on the website is always up-to-date and consistent, greatly enhancing the efficiency of website operation and user experience.

III. Summary

Anqi CMS'scontactTags are an indispensable tool in website content operation.It extracts the core contact information from the code, achieving centralized management and dynamic display, making website updates and maintenance extremely simple.Whether it is a phone number, address, email, or various social media contact information, it can be easily presented to users through simple backend settings and template tags, helping you build a professional, efficient, and easy-to-maintain website.

Common Questions (FAQ)

  1. Why did I use it, butcontactLabel, but the website front-end does not display any information?答：This usually has several reasons.Firstly, please check if you have actually filled in the corresponding information in the "Contact Information Settings" under the "Background Settings" in the Anqi CMS background.contactthe tag innameThe property value is exactly the same as the "parameter name" set in the background (including case). Finally, if the information includes images (such as WeChat QR codes), please ensure that the images have been successfully uploaded.

  2. 问：除了电话、邮箱，我还可以自定义哪些联系方式字段？答：The 'Contact Information Settings' page of Anqi CMS provides the 'Custom Settings Parameters' feature.You can add any field according to your actual needs, such as WhatsApp number, Telegram ID, Facebook page link, LinkedIn personal profile, Instagram account, etc.{% contact with name="您的参数名" %}的English方式调用即可。

  3. Q:contactCan the returned content of the label be directly used as an attribute value of an HTML tag? For example, ashref?Answer: Yes,contactThe label returns only plain text strings (except for image URLs). Therefore, you can directly embed it into the attribute of HTML tags, such as<a href="tel:{% contact with name='Cellphone' %}">or<img src="{% contact with name='Qrcode' %}" />to achieve the functionality of making phone calls, sending emails, or displaying images.