How does the `contact` tag dynamically display website contact information (phone, address, email, etc.)?

AnQiCMS provides a flexible and efficient way to manage various information on the website, among which the dynamic display of website contact information is achieved through its built-incontactTags can be easily implemented. This means you do not need to manually modify the code, and you can centrally manage information such as phone numbers, addresses, and email addresses in the background, and automatically update them 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 into the backend, navigate toBackend settingsThen select the menu.Contact information settings.

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

  • ContactFor example, your name or company contact person.
  • Contact phone numberThe main contact phone number of the company.
  • Contact addressCompany detailed address:
  • Contact email: Used for customer communication email address.
  • WeChat ID: Convenient for customers to add WeChat friends.
  • WeChat QR code: Upload WeChat QR code image directly.

In addition to these commonly used contact methods, Anqi CMS also providesCustom settings parametersFunction. If you have any special contact information that you need 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 you call this information in the template. It is recommended to use English, and the system will automatically convert it to camel case.For example, if you enter "WhatsApp", when calling the template it isWhatsApp.
  • Parameter valueThis is the actual content to be displayed, such as your WhatsApp number or Facebook homepage URL.
  • NoteUsed to record the purpose of this custom parameter for easy management.

In this way, all contact information of the websites is centralized 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.

Second, dynamically call the contact information in the website template

After completing the setting of the background contact information, the next step is to use it in the website front-end templatecontactLabel to dynamically display this information. The Anqi CMS template engine uses a syntax similar to Django, which is simple and clear in its calling method.

contactThe basic usage of tags is:{% contact 变量名称 with name="字段名称" %}.nameThe property is crucial, it needs to match the "parameter name" you set in the background or the default field name.变量名称It 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.

Here are some common contact methods and their correspondingcontactTag call 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 emailContact email is usually used byname="Email"And can be combined withmailto:An agreement, so that the user can send an email by clicking:

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

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

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

  4. Display WeChat QR codeIf the WeChat QR code image is uploaded on the back-end, it can be used:name="Qrcode". Since it returns the image URL, it needs to be配合<img>the tag to use:

    <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 practice to addaltan attribute.

  5. Display custom contact informationSuppose you added a custom parameter namedWhatsAppThe parameter value is your WhatsApp number. You can call it like this in the template:

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

    HereWhatsAppIt is the parameter name set in the background.

  6. Call in a multi-site environment.If your security CMS is deployed across 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>

    In most cases, if you do not need to call across sites, you can ignoresiteIdParameters, the system will automatically retrieve the contact information of the current site.

By 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 operations and user experience.

Chapter 3, Summary

Of Security CMScontactTags are an indispensable tool in website content operation. They剥离 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 displayed in front of users through simple backend settings and template tags, helping you build a professional, efficient, and easy-to-maintain website.

Frequently Asked Questions (FAQ)

  1. Ask: Why did I usecontactLabel, but the website front-end does not display any information?Answer: There are usually several reasons. First, please check if you have actually filled in the corresponding information in the "Background Settings" -> "Contact Information Settings" on the Anqi CMS backend.Secondly, please ensurecontactin the labelnameThe attribute value is exactly the same as the "parameter name" set in the background (including case). Finally, if the information contains images (such as WeChat QR codes), please ensure that the images have been successfully uploaded.

  2. Ask: Besides phone and email, what other contact information fields can I customize?Answer: The 'Contact Information Settings' page of Anqi CMS provides the 'Custom Settings Parameters' feature.You can add any field as per your requirement, such as WhatsApp number, Telegram ID, Facebook homepage link, LinkedIn personal page, Instagram account, etc.Please enter your 'parameter name' (suggested in English) and the corresponding 'parameter value', then use it in the template{% contact with name="您的参数名" %}can be called in this way.

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