A website can effectively convey information, one of the cores is to allow visitors to easily find contact information.Clear and concise contact information is crucial for enhancing user experience and building trust, whether it's in the footer of a website, a dedicated 'Contact Us' page, or within article content.AnqiCMS (AnqiCMS) offers flexible and customizable features, allowing you to easily manage these information 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 your AnqiCMS website front page, and support flexible display of custom parameters.
Get ready for the front-end display: backend contact information settings
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“Background Settings”, clickthe "Contact Information Settings"Here you can see some commonly used contact information fields, such as contact person, phone number, address, email address, WeChat ID, and WeChat QR code.These are the default system-provided, which are sufficient to meet the needs of most websites.
If the default options do not meet your needs, such as when you want to add a WhatsApp number, Telegram ID, or customer service working hours, etc., AnQi CMS provides very flexible "Custom Setting Parameters"Function. Just click the 'Add' button under 'Custom parameter settings' to create a new field:
- Parameter name:This is the unique identifier used for the front-end template, it is recommended to use English or pinyin, for example
WhatsApp/CustomerServiceTime. The system will automatically convert it to camel case (capitalizing the first letter of each word). - Parameter value:Enter the specific content of this parameter, such as your WhatsApp number
+1234567890or working hours周一至周五 9:00-18:00. - Note:This is an optional field used to explain the purpose of this parameter, for your future management convenience
After completing these settings, remember to click save to prepare your contact information in the background.
Display contact information on the front page: flexible tag call
In AnqiCMS, displaying the contact information set in the background on the front page mainly relies on the powerfulcontactTemplate tag. This tag allows you to obtain the corresponding contact information by specifying the 'parameter name'.
通常，您会在模板文件（such as ）partial/footer.html/partial/header.htmlor a dedicated contact.htmlThese tags are used on the page.
1. Call the default contact information field.
It is very intuitive to call the preset contact information on the back-end. Just usecontactthe tag and use it.nameAttribute is 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 number, email, and address information you filled in the "Contact Information Settings" in the background.
2. Call custom contact information parameters
For the fields you add in the background "Custom settings parameters", the calling method is also the same. Just make surenamethe property matches the "parameter name" set in the background.
Suppose you have customized a namedWhatsAppThe parameter, whose value is your WhatsApp number, then on the front page, you can call it like this:
<p>WhatsApp：{% contact with name="WhatsApp" %}</p>
If you have also customizedCustomerServiceTimeto display the customer service working hours:
<p>客服在线时间：{% contact with name="CustomerServiceTime" %}</p>
This allows your custom information to be displayed flexibly, just like built-in fields.
3. Make the display smarter: combine variables and conditional judgments
In order to make your template code cleaner and more readable, you cancontactAssign the output of the label to a variable, and then use that variable. This not only makes it convenient to refer to it multiple times, but also allows for conditional judgment when needed.
For example, you can assign the phone number to a variablephoneNumber:
{% contact phoneNumber with name="Cellphone" %}
<p>联系电话：<a href="tel:{{ phoneNumber }}" rel="nofollow">{{ phoneNumber }}</a></p>
Here we also add the phone number an extra timetel:An agreement that allows visitors to directly dial on their phones, this is a great user experience detail.
Sometimes, certain contact methods (such as WeChat QR codes) may not always exist, or you may only want to display them in specific situations. In this case, combining the use of AnqiCMS'sifLogical judgment labels will be very useful.
Suppose you uploaded a WeChat QR code and want it to be displayed only 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 %}
By such a judgment, it can avoid the appearance of a blank image placeholder on the page when the QR code is not set.
Some practical suggestions
- Multi-site calls: If you manage multiple AnqiCMS sites and want to call the contact information of a specific site in a template,
contactTags also supportsiteIdParameters. For example{% contact with name="Cellphone" siteId="2" %}this will call the contact number of the site with ID 2. - Semantic HTML:When displaying contact information, try to use semantic HTML tags like
<p>/<a>Combine it with CSS to beautify, ensuring that the information is easy to read and aesthetically pleasing. For example, wrap the phone number in<a href="tel:..." rel="nofollow">in, and wrap the email address in<a href="mailto:...">Chinese, so users can directly click to make a call or send an email.
Of Security CMScontactThe 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, thereby enhancing the professionalism of the website and user interaction.
Frequently Asked Questions (FAQ)
1. Can I use Chinese characters for parameter names when I customize parameters in the background?
Yes, you can set the parameter name in Chinese. For example, 'Customer Service Working Hours'.AnqiCMS will automatically convert it into a format recognizable by the template.However, to maintain the cleanliness and versatility of template code, we usually recommend using English or pinyin as parameter names, such asCustomerServiceTimeThis has an advantage in team collaboration and internationalized template creation.
2. Why did I set the contact information but the front page did not display it?
There are several possible reasons:
- Cache problem:Please try to clear the system cache of AnqiCMS. Find "Update Cache" at the top menu of the backend and click, or check if CDN caching is configured and refresh the CDN cache.
- The template has not been updated:You may have modified the template file, but the file was not uploaded to the server correctly or was not reloaded by AnqiCMS.
- The 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" of the background, including case sensitivity. For example, in the background it isWhatsApp, it must also be in the templateWhatsApp, and cannot bewhatsapp. - Condition judgment restriction:If you have used
ifCheck if the tag condition is correct