An effective website should be able to convey information, one core aspect being that visitors should be able to easily find the contact information.Whether it is on the website footer, a dedicated 'Contact Us' page, or within article content, clear and easy-to-understand contact information is crucial for enhancing user experience and building trust.AnqiCMS (AnqiCMS) has flexible and customizable features that allow you to manage these information very conveniently in the background, and display them on the front page, even supporting custom parameters to meet various business needs.
Next, let's take a look at how to cleverly display these contact information on the front page of your AnqiCMS website and support flexible display with custom parameters.
Get ready for front-end display: Back-end contact information setup
Before starting the layout of the front page, we need to configure the required contact information in the AnqiCMS backend management system.
Log in to the AnqiCMS backend, find it in the left menu“Backend Settings”click“Contact Information Settings”
If the default option does not meet your needs, such as when you want to add a WhatsApp number, Telegram ID, or customer service working hours, etc., non-standard contact information, AnQi CMS provides very flexibleCustom setting parameters功能。You just need to click the 'Add' button under 'Custom setting parameters' to create a new field:
- Parameter name:This is the unique identifier for front-end template calls, it is recommended to use English or pinyin, for example
WhatsApp/CustomerServiceTime. The system will automatically convert it to camel case naming (the first letter of each word is capitalized). - Parameter value:Enter the specific content of the parameter, such as your WhatsApp number
+1234567890, or working hours周一至周五 9:00-18:00. - Note:This is an optional field, used to explain the purpose of the parameter, convenient for you to manage in the future.
Complete these settings and remember to click Save so that your contact information is ready in the background.
Display contact information on the front page: Flexible tag call
In AnqiCMS, displaying the contact information set in the background to the front-end page mainly relies on the powerfulcontactTemplate tags. This tag allows you to retrieve corresponding contact information by specifying the 'parameter name'.
You will usually find them in template files (for example)partial/footer.html/partial/header.htmlor a dedicatedcontact.htmlPage) these tags are used.
1. Call the default contact information field.
It is very intuitive to call the background preset contact information. Just usecontacttag and set itsnameProperty settings are set to the field name you want to call.
For example, to display the website's contact phone number and email on the front page:
<p>电话：{% contact with name="Cellphone" %}</p>
<p>邮箱：{% contact with name="Email" %}</p>
<p>地址：{% contact with name="Address" %}</p>
This code will directly output the phone, email, and address information you fill in the "Contact Information Settings" on the backend.
2. Call custom contact information parameters
For the fields you add in the "Custom Settings Parameters" on the backend, the calling method is exactly the same. Just make surenamethe property matches the "Parameter Name" you set on the backend exactly.
Assuming you have customized a name in the backgroundWhatsAppThe parameter, whose value is your WhatsApp number, can be called like this on the front page:
<p>WhatsApp：{% contact with name="WhatsApp" %}</p>
If you have also customizedCustomerServiceTimeto display the customer service working hours:
<p>客服在线时间：{% contact with name="CustomerServiceTime" %}</p>
So, your custom information can be displayed flexibly just like built-in fields.
3. Make the display smarter: combine variables and conditional judgment
To make your template code cleaner and more readable,contactThe output of the label is assigned to a variable and then used. This is not only convenient for multiple references but also allows for conditional judgments when needed.
For example, you can assign a phone number to a variablephoneNumber:
{% contact phoneNumber with name="Cellphone" %}
<p>联系电话：<a href="tel:{{ phoneNumber }}" rel="nofollow">{{ phoneNumber }}</a></p>
Here, we also added the phone number extratel:The protocol allows visitors to directly click to dial on their mobile phones, which is a great detail of user experience.
Sometimes, certain contact methods (such as WeChat QR codes) may not always be available, or you may only want to display them in specific situations. At this time, using AnqiCMS'sifLogic judgment label will be very useful.
Assuming you have uploaded a WeChat QR code, and you only want to display it when the QR code image exists:
{% contact weChatQrcode with name="Qrcode" %}
{% if weChatQrcode %}
<div class="wechat-contact">
<p>微信扫码联系我们：</p>
<img src="{{ weChatQrcode }}" alt="微信二维码" style="width: 120px; height: 120px;">
</div>
{% endif %}
Through such judgment, it can avoid the blank image placeholder from appearing on the page when the QR code is not set.
some practical suggestions
- Multisite call:If you manage multiple AnqiCMS sites and want to call the contact information of a specific site in a certain template,
contactTags also supportsiteIdparameter. For example,{% contact with name="Cellphone" siteId="2" %}This will call the contact phone number of the site with ID 2. - Semantic HTML: When displaying contact information, try to use semantic HTML tags, such as
<p>/<a>and styled with CSS to ensure readability and aesthetics. For example, wrapping phone numbers in<a href="tel:..." rel="nofollow">and email addresses in<a href="mailto:...">English
Anqi CMS'scontactThe tag and custom parameter feature provides you with great flexibility, allowing you to present various contact information in a structured and controllable manner on the front page according to your actual needs, thereby enhancing the professionalism of the website and user interaction.
Common Questions (FAQ)
1. When I customize parameters in the background, can the parameter name be in Chinese?
Yes, you can set the parameter name in Chinese.For example, 'Customer service working hours'.AnqiCMS will automatically convert it to a format recognizable by the template.CustomerServiceTimeThis is more advantageous in team collaboration and international template creation.
2. Why didn't the contact information I set display on the front page?
There could be several reasons:
- Cache issue:
- Template not updated:You may have modified the template file, but the file was not uploaded to the server correctly or was not reloaded by AnqiCMS.
- Field name does not match:Check what you are using in the template
nameIs the attribute exactly the same as the field name or custom parameter name in the "Contact Information Settings" on the back-end, including case sensitivity. For example, on the back-end it isWhatsApp, it must also be in the templateWhatsApp, and cannot bewhatsapp. - Condition judgment restriction：If you have used
ifTags for condition judgment, please check if the conditions are correct