In AnQiCMS template, easily call and display the website contact information
AnQiCMS as an efficient and flexible content management system, is dedicated to helping enterprises and content operation teams easily manage website content.Its powerful template engine support allows website developers to display data configured on the backend in an intuitive way on the frontend page.Today, let's delve into how to conveniently call and display the contact information of the website in AnQiCMS templates, so that your visitors can get in touch with you at the first time.
1. Backend configuration: Set the website contact information
In AnQiCMS, the contact information of the website is unifiedly managed in the background. This greatly simplifies the process of content maintenance, allowing contact information to be updated without modifying the code.
You can find it in the background navigation menu“Backend Settings”, and then click.“Contact Information Settings”.
This provides the main contact information fields on the website, for example:
- Contact Person
- Phone Number
- Contact Address
- Contact Email
- WeChat ID
- WeChat QR Code
You can fill in these information one by one according to the actual situation.AnQiCMS also supports more social media contact methods, such as QQ, WhatsApp, Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, Youtube, etc.
If you have additional requirements, such as your website needs to display a Telegram contact method, and it is not included in the default list, AnQiCMS allows youCustomize settings parameters. You just need to click the "Add" button in the "Custom Setting ParametersTelegram)，and fill in the corresponding "parameter value" (such as your Telegram account or link), and then add a brief remark to indicate its purpose.AnQiCMS's template system will automatically convert the parameter name you enter to camel case naming (i.e., each word starts with an uppercase letter and there is no space in between), which is convenient for calling in the template.
Complete the filling of all contact information and custom settings, and don't forget to click save to ensure that your changes take effect.
2. Front-end template: Flexibly call contact information
Configure the background information first, and then we can easily call these data in the website template.AnQiCMS uses a template engine syntax similar to Django, allowing you to retrieve the contact information you set in the background with specific tags.
The core template tags arecontact。Its basic usage is to{% contact 变量名称 with name="字段名称" %}.The English translation of "auto" is "English".nameThe parameter is the specific contact method field you want to call.
Next, let's see how to call it through specific examples:
1. Call basic contact information
If you want to display the contact phone number, email, and address in the footer of the website, you can write it like this:
<div class="contact-info">
<p>联系电话：{% contact with name="Cellphone" %}</p>
<p>电子邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>
<p>公司地址：{% contact with name="Address" %}</p>
</div>
In this example,{% contact with name="Cellphone" %}It will directly output the contact phone number you filled in the background. For the email, we also use extra<a href="mailto:...">Label the email send button to allow visitors to directly click and send an email, enhancing user experience.
2. Call social media links
AnQiCMS built-in multiple social media fields. If you fill in the Facebook homepage link in the background, you can call it like this in the template:
<div class="social-links">
{% contact facebookLink with name="Facebook" %}
{% if facebookLink %}
<a href="{{ facebookLink }}" target="_blank" rel="nofollow">
<img src="/public/static/images/facebook-icon.png" alt="Facebook">
</a>
{% endif %}
{# 类似的，如果需要调用Twitter #}
{% contact twitterLink with name="Twitter" %}
{% if twitterLink %}
<a href="{{ twitterLink }}" target="_blank" rel="nofollow">
<img src="/public/static/images/twitter-icon.png" alt="Twitter">
</a>
{% endif %}
</div>
Here we used{% contact 变量名称 with name="字段名称" %}This writing style with variable names, combined with{% if ... %}logical judgment, social media icons and links will be displayed only when the corresponding links are set on the backend, thus avoiding the appearance of empty links.rel="nofollow"The property is also commonly used for social media links, which is more SEO-friendly.
3. Call custom contact method
Remember the custom parameter 'Telegram' we added in the background before? It's just as simple and intuitive to call it in the template:
<div class="custom-contact">
{% contact telegramInfo with name="Telegram" %}
{% if telegramInfo %}
<p>Telegram：<a href="{{ telegramInfo }}" target="_blank">点击添加Telegram</a></p>
{% endif %}
</div>
Please note,nameThe value of the parameter corresponds to the 'parameter name' you filled in the 'Custom Setting Parameters' in the background, and it will be automatically converted to camel case. For example, if you fill in the parameter name in the backgroundTelegramEnglish template usagename="Telegram"to call it.
4. Call WeChat QR code
If your website needs to display WeChat QR code and let visitors scan to add, you can call it like this:
<div class="wechat-qrcode">
{% contact qrcodeImage with name="Qrcode" %}
{% if qrcodeImage %}
<p>微信扫码添加：</p>
<img src="{{ qrcodeImage }}" alt="微信二维码" style="width: 120px; height: 120px;">
{% endif %}
</div>
Three, optimize display effect and user experience
Just calling and displaying information may not be enough, we can further optimize to make these contact methods more practical:
- Phone numbers are clickable:Use
<a href="tel:号码">Labels allow mobile device users to directly click to make a phone call. - Emails can be sent:Use
<a href="mailto:邮箱地址">Labels, convenient for users to contact directly through the email client. - Icon combined with text:For social media, combining small icons and text descriptions is both aesthetic and clear.
- Uniform layout:Consider placing all contact information in the footer, sidebar, or a separate "Contact Us" page to maintain the overall cleanliness and professionalism of the website.
Through AnQiCMS's flexible template tags and backend settings, you can easily manage and display all the contact methods of the website.Whether it is an embedded field or a custom parameter, it can be realized in a few lines of simple template code, greatly improving the management efficiency and maintainability of website content.This guide is intended to help you better utilize AnQiCMS, building a more comprehensive and user-friendly website.
Common Questions (FAQ)
1. Why didn't the contact information display on the front end even though I followed the steps?
This usually has several reasons.First, make sure you have filled in the corresponding field and clicked "Save" in the "Contact Information Settings" on the AnQiCMS backend.contactTagsnameIs the parameter exactly matching the name of the field you want to call (including case).Finally, AnQiCMS system has a caching mechanism, and sometimes you may need to refresh your browser cache, or click on 'Update Cache' in the background to ensure that the latest changes are loaded.
2. I want to add other contact methods in addition to the default ones, such as Telegram, what should I do?
AnQiCMS supports custom contact information.You can find the "Custom Settings Parameters" area at the bottom of the "Contact Information Settings" page.TelegramEnglish name or any name you want), enter your Telegram account or link in the 'Parameter value', and add a note. After saving, you can use it in the template.{% contact with name="Telegram" %}Call this custom Telegram message.
3. My website is in multi-site mode, can I call the contact information of other sites?
It can be. AnQiCMS'scontacttag supportsiteIdparameters. If you have created multiple sites in multi-site management, each site has a unique ID. You can incontactspecified in the tagsiteIdCall the contact information for a specific site, for example: `{% contact