In website operation, clearly displaying the company's contact information is crucial for building customer trust and promoting communication.Whether it is contact name, phone number, office address, or social media account, this information needs to be prominently displayed on the website for easy access by users.This provides a convenient solution for Anqi CMS, allowing you to manage and display these key information flexibly without writing complex code.
Configure your contact information in the background
The backend design of AnQi CMS is aimed at making it easy for you to manage website content, which includes your contact information.To configure this information, you can log in to the background management interface, find the "Background Settings" menu under the "Contact Information Settings" option.Here, you will see a series of predefined fields, such as “Contact Person”, “Contact Phone”, “Contact Address”, “Contact Email”, as well as “WeChat ID” and “WeChat QR Code”.You only need to fill in your information in the corresponding input box.
It is worth mentioning that if the preset fields cannot meet your business needs, Anqi CMS also provides the 'Custom Setting Parameters' feature.You can add custom fields such as WhatsApp account, Facebook page link according to your needs.These custom field names can be freely set, and the system will automatically convert the letters to camel case for easy calling in the front-end template.Fill in the "parameter name" and "parameter value
Get and display contact information in the template
Configure contact information first, and then display them on the website front end. Anqi CMS provides a special template tag for obtaining contact information.contactThis tag is very intuitive and easy to use.
The basic usage is like this:{% contact 变量名称 with name="字段名称" %}
The 'field name' is the name of each item you fill in the 'Contact Information Settings' on the backend (such asUserName/Cellphone/AddressEnglish）。If you do not specify the 'variable name', the label will directly output the value of the field. If you specify the 'variable name', for example{% contact myPhone with name="Cellphone" %}，then you can use it in subsequent code.{{myPhone}}Refer to this value.
Here are several common ways to obtain fields:
- Contact Name:
<span>联系人：{% contact with name="UserName" %}</span> - Contact phone number:
<span>联系电话：<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></span> - Contact address:
<span>联系地址：{% contact with name="Address" %}</span> - Contact email:
<span>联系邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></span> - WeChat Account:
<span>微信号：{% contact with name="Wechat" %}</span> - WeChat QR Code:
<span><img src="{% contact with name="Qrcode" %}" alt="微信二维码" /></span>Please note that when fetching image URLs, such as WeChat QR codes, they are usually embedded<img>Tagssrcin attributes.
For the custom contact information you added in the background, such as a custom parameter you created named "WhatsApp", you can alsocontactuse the tag to get its value:<span>WhatsApp：{% contact contactWhatsApp with name="WhatsApp" %}{{contactWhatsApp}}</span>In the above example, we first takecontactthe value obtained from thecontactWhatsApptag and assign it to a variable, then output it. If a custom field may not have content, you can also use conditional judgment in conjunction{% if contactWhatsApp %}Avoid displaying empty content.
Flexible application to all corners of the website
On the website, contact information is usually located in the footer, "Contact Us" page, or sidebar, etc. To avoid rewriting the same code on each page, you can take full advantage of the Anqi CMS template.includeFunction.
You can create a name forpartial/footer.htmlThe file, place all contact information related template code inside. For example:
<div class="contact-info-block">
<p>联系人：{% contact with name="UserName" %}</p>
<p>电话：<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></p>
<p>地址：{% contact with name="Address" %}</p>
<p>邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>
<p>微信：{% contact with name="Wechat" %}</p>
{% set qrcodeUrl = "" %}
{% contact qrcodeUrl with name="Qrcode" %}
{% if qrcodeUrl %}
<div>
<img src="{{qrcodeUrl}}" alt="微信二维码" />
</div>
{% endif %}
{% set whatsapp = "" %}
{% contact whatsapp with name="WhatsApp" %}
{% if whatsapp %}
<p>WhatsApp：{{whatsapp}}</p>
{% endif %}
</div>
Then in your main template file (such as)base.htmlorindex.html), just simply include this part:{% include "partial/footer.html" %}
So, when you need to update contact information, you just need to modify it in the background, and the front-end page will automatically update without changing any template code, greatly improving operational efficiency.
For users with multi-site needs