In website operation, it is crucial to clearly and accurately display contact information to establish user trust and promote communication. AnQiCMS provides a very convenient way to manage and display this information, that is, throughcontactLabel.This tag helps 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.
第一步：In AnQiCMS backend, configure contact information
Before we start usingcontactBefore the label, you need to configure the contact information to the AnQiCMS backend. This process is very intuitive:.
- Log in to the AnQiCMS backend.
- Find and click on 'Backend Settings' in the left navigation bar.
- Choose "Contact Settings".
Here, you will see a series of predefined fields such as "ContactJust fill in your information in the corresponding input box.
It is worth mentioning that AnQiCMS's flexibility 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 direct corresponding field in the backend, 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".So, we can call it in the template later.
Step 2: UnderstandcontactBasic usage of the tag
contactTags are a core component of the AnQiCMS template engine, their basic usage is{% contact with name="字段名称" %}. ThisnameThe parameter is the field names we configure in the "Contact Information Settings" on the backend (for exampleUserName/Cellphone/Addressetc.).
If we want to directly output some contact information in the template, we can use this method. For example, to display the phone number, it can be written as{% contact with name="Cellphone" %}.
Additionally, we can also assign the contact information obtained to a variable so that it can be used multiple times in a template or for more complex processing. At this point, the usage changes to{% contact 变量名称 with name="字段名称" %}{{ 变量名称 }}For example,{% contact myPhone with name="Cellphone" %}{{ myPhone }}.
For users with multiple site management needs,contactTags also supportsiteIdThe parameter can specify the contact information of the specific site configuration. However, for most single-site users, it is usually unnecessary to pay attention to this parameter.
Third step: Call the contact information in the page
UnderstoodcontactAfter the configuration and basic usage of tags, let's see how to display these contact information in the web page.
Display contact name, phone number, and address
You can display the contact's name, phone number, and addressUserName/CellphoneandAddressField. To make it convenient for users to click on the phone number and make a call directly, we can wrap it intel:a 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 above code,{% contact with name="UserName" %}This will directly output the contact name you filled in the backend. The phone number is used to create a clickable phone link.
Display contact email and social media links
For the contact email (Email) And various social media links (such asFacebook,Twitter,Instagram,Youtube), the calling method is also consistent. Please make sure 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>
Here are some things to notetarget="_blank"Will open the link in a new tabrel="nofollow"The attribute can tell the search engine not to track this link, which is often used in certain SEO strategies.
Display the WeChat QR code
If you have uploaded a WeChat QR code picture in the 'Contact Information Settings' background, you can useQrcodethe field to display it:
<div>
<p>微信扫一扫：</p>
<img src="{% contact with name='Qrcode' %}" alt="微信二维码" style="width: 100px; height: 100px;">
</div>
Through this method, users can directly scan the QR code to add your WeChat.
Invoke custom fields (take WhatsApp as an example)
Assuming you added a parameter named in the "Contact Information Settings" under the "Custom Settings" in the backgroundWhatsAppThe parameter, and entered 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>
Please ensure that the "Custom Setting Parameters" in the background match the "Parameter Name" in the templatenameThe value of the parameter is completely consistent (for exampleWhatsApp).
Summary
contactThe label is a very practical feature in the AnQiCMS template system, which makes the management and display of website contact information extremely simple and efficient.Through flexible configuration of background parameters, combined with the invocation of template tags, you can easily display contact information in the way you want at any location on the website, thus better serving your users.contactLabels can provide strong support.
Common Questions and Answers (FAQ)
Q1: If I change the contact phone number or address in the background, will the front page update immediately?
A1: Yes, usually, the data update of AnQiCMS background