How does the `contact` tag display contacts, phone numbers, addresses, and social media links on the AnQiCMS page?

In website operation, clearly and accurately displaying contact information is crucial for building user trust and promoting communication. AnQiCMS provides a very convenient way to manage and display this information, that is, bycontactThe tag can help us easily call the preset contact name, phone number, address, and social media links on any page of the website, without hard coding, greatly improving content management efficiency.

Step 1: Configure contact information in the AnQiCMS backend

Before we start usingcontactBefore the label, you first need to configure the contact information in the AnQiCMS backend. This process is very intuitive:

1. Log in to the AnQiCMS backend.
2. Find and click the "Back-end settings" in the left navigation bar.
3. Select "Contact Information Settings".

Here, you will see a series of predefined fields, such as "contact person", "contact phone number", "contact address", "contact email", "WeChat ID", and "WeChat QR code" and so on.Just fill in your information in the corresponding input box.

It is worth mentioning that the flexibility of AnQiCMS allows you to add custom contact information.If your business needs to display WhatsApp, Facebook homepage or other specific social media links, but there is no corresponding field directly in the background, you can add them through the 'Custom Settings Parameters' feature on this page.For example, you can add a parameter named "WhatsApp" and enter your WhatsApp contact link or number in the "Parameter Value".This way, we can call it later in the template.

Step two: UnderstandcontactBasic usage of tags

contactThe tag is a core component of the AnQiCMS template engine, its basic usage is{% contact with name="字段名称" %}. ThisnameParameters are those field names we configure in the backend "Contact Information Settings" (such asUserName/Cellphone/Addressetc.).

If we want to output some contact information directly in the template, we can use this method. For example, to display the phone number, it can be written as{% contact with name="Cellphone" %}.

In addition, we can also assign the contact information obtained to a variable, so that it can be used multiple times in the template or for more complex processing. At this point, the usage becomes{% contact 变量名称 with name="字段名称" %}{{ 变量名称 }}For example,{% contact myPhone with name="Cellphone" %}{{ myPhone }}.

For users with multiple site management needs,contactTags also supportsiteIdThe parameter can specify contact information for calling a specific site configuration. However, for most single-site users, it is usually unnecessary to pay attention to this parameter.

Step 3: Call the contact information in the page

UnderstoodcontactAfter the configuration and basic usage of the tag, let's see how to display this contact information in the website page.

Display contact name, phone number, and address

You can use to display the contact name, phone number, and address,UserName/CellphoneandAddressField. To make it easy for users to click on the phone number and dial it directly, we can wrap it intel:link.

<p>联系人：{% contact with name="UserName" %}</p>
<p>电话：<a href="tel:{% contact with name='Cellphone' %}">{% contact with name='Cellphone' %}</a></p>
<p>地址：{% contact with name='Address' %}</p>

In the code above,{% contact with name="UserName" %}The contact name you entered in the background will be output directly. The phone number is used to build a clickable phone link.

Display contact email and social media links

For the contact email (EmailAnd various social media links (such asFacebook,Twitter,Instagram,Youtubeare consistent in their calling method. Make sure that you have entered the complete link address (includinghttp://orhttps://)

<p>邮箱：<a href="mailto:{% contact with name='Email' %}">{% contact with name name='Email' %}</a></p>
<p>Facebook：<a href="{% contact with name='Facebook' %}" target="_blank" rel="nofollow">我们的Facebook页面</a></p>
<p>Twitter：<a href="{% contact with name='Twitter' %}" target="_blank" rel="nofollow">关注我们Twitter</a></p>

Please note heretarget="_blank"will open the link in a new tab, whilerel="nofollow"The attribute can tell the search engine not to follow this link, which is used in some SEO strategies.

Display WeChat QR code

If you upload a WeChat QR code image in the background "Contact Information Settings", you can useQrcodefield to display it:

<div>
    <p>微信扫一扫：</p>
    <img src="{% contact with name='Qrcode' %}" alt="微信二维码" style="width: 100px; height: 100px;">
</div>

By this method, users can directly scan the QR code to add your WeChat.

Call a custom field (for example, on WhatsApp)

Suppose you have added a custom parameter named in the "Contact Information Settings" under the backendWhatsAppThe parameter, and filled in the WhatsApp contact link or number in its "parameter value". Then, you can call it in the template like this:

<p>WhatsApp：<a href="{% contact with name='WhatsApp' %}" target="_blank">立即通过WhatsApp联系</a></p>

Make sure the parameter name in the background "Custom Settings Parameters" matches the template innamethe value of the parameter is completely consistent (for exampleWhatsApp)

Summary

contactThe tag is a very practical feature in the AnQiCMS template system, making the management and display of website contact information extremely simple and efficient.By flexibly configuring backend parameters and combining template tag calls, you can easily display contact information in the way you want at any location on the website, thereby better serving your users.Whether it is to display basic contact information or integrate various social media links,contactLabels can provide strong support.

Frequently Asked Questions (FAQ)

Q1: If I change the contact phone number or address in the background, will the front page update immediately?

A1: Yes, usually, AnQiCMS background data is updated